Skip to content
OverviewSolutions
6
Comments
6
Kemystra
@Kemystra

All comments

  • Kemystra•200
    @Kemystra

    Hey @Dagime-Teshome, congratz on solving this challenge!

    The big thing to improve in making a responsive site is to use relative units rather than fixed ones. px are literally pixels, so that's obviously fixed. Some common relative units are vh, vw, rem, %, etc. Try to experiment with them and look up docs for more.

    Specifically for this site, instead of centering the card with a containerClass and margin: auto (which is an old trick), you can use CSS Flexbox (learn more here).

    A few small tips:

    • Add this snippet to every project that you will ever make:
    * {
    box-sizing: border-box
}

    This ensure that width of an object will also include its padding. Seems insignificant until you start banging your head on how to calculate widths with variable padding.

    • Not every element needs a class. Try to not add them until you need it. Once projects get larger, it will be easier to keep track of used class names. Besides, a big project will usually force you to use more type of CSS selectors anyway.

    CSS is damn weird, but satisfying in a way. Good luck and happy coding!

    Marked as helpful
  • Kemystra•200
    @Kemystra

    Hey, congratz for solving the problem!

    I just wanted to share how I made the image violet. But firstly, I used the picture tag instead of just the normal img tag. It helps to switch between images depending on a CSS media query (e.g: switch between mobile and desktop specific images based on width).

    picture tag is pretty much a special div, and you put an img tag inside. What I did was I set the picture background to violet. You can then use the CSS property mix-blend-mode. Basically it will blend the image with the background color. There are a lot of values that you can use with mix-blend-mode, so try to experiment to see which one will achieve the closest result.

    Marked as helpful
  • Kemystra•200
    @Kemystra

    Another way you may consider is to ditch the use of padding for class service-content. Instead, set the property justify-content to flex-end. All of the text will then go to the bottom, and you can set the gap between them with the gap property (or just use margin, I guess). This guarantees your text to not overflow due to lack of empty vertical space.

    To do that however, you need to have a fixed height for the services-item class. One trick that I used is to set the aspect-ratio to be the same as the background-image's aspect ratio. For example, if the image is 400x500 in resolution, then I will do aspect-ratio: 4 / 5. This will maintain the div's proportion to the image.

    Marked as helpful
  • Kemystra•200
    @Kemystra

    Congratz for completing the challenge!

    Note that "bigger" screen here means higher resolution. Smartphone nowadays were shipped with HD displays that fit in your palm.

    I tested your site on Redmi 10 and iPad Mini 4 and it's holding up to the task. A fixed size container like what you made here is enough.

    So nope, unless if the layout needs to be changed significantly on bigger screen, you don't need another media query.

    Marked as helpful
  • Kemystra•200
    @Kemystra

    HI @djeinarsson, congratz for your solution!

    Unfortunately, I don't have an answer for your Bootstrap question, though I would avoid them if I'm starting out on CSS.

    With that being said, simply having a fixed size component should be enough. However, if you want to get a bit advanced, you can use relative units and CSS clamp() function onto the container.

    /* 
clamp(min, preferred, max) 
clamp() allow properties to follow the preferred value
limiting it between the max and min values.
Here's an example:
*/
.container {
  height: clamp(400px, 60%, 1000px)
}
    Marked as helpful
  • Kemystra•200
    @Kemystra

    Inside the Design Comparison, it seems like your solution is bigger than the design. Can you elaborate the question, as I don't see anything shrinking?