Review Card component

Hi Adeoye, I think @vanzasetia gave you some really good advice, so I'll just keep this short. You may find that after you adjust your breakpoint, your image may be pushed upward with some space in the image container. If that's the case, you'll have to add object-fit: cover and height: 100% to the img. As Vanza said, everything is really big, and I think you can try reducing the sizes in general. If you compare your solution with the original design at 1440px, your body's paragraph font size is almost double in size. Other than that, things look good, and your use of the responsive picture element was also done well, so keep it up! 😊

Hi, Adeoye! 👋

First, I would recommend having the non-minified stylesheet. It will allow everyone to see and give feedback to your CSS easily. 🙂

About organizing Sass files, I like the 7-1 pattern: 7 folders, 1 file. So, you may want to give it a try.

For the image, I would recommend adjusting the breakpoint of the media condition. 1440px for the desktop image is too late. The same for the breakpoint of the media query.

I suggest adding the media query whenever it is needed (not based on specific screen sizes). So, when there's enough space for the card to become two-column layout, add a media query there.

Lastly, I recommend having a max-width on the card element. Currently, on 1280px the card is filling the entire page, the image is so big, and the paragraph content is really spread out (not good readability).

Hope this helps! 🙂

👾Hello Adeoye, congratulations for your new solution!

😎 You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

You need to fix the container size that is a bit off, this challenge uses the standard container size that is max-width: 1110px. To make the image have a better fit inside of it, make the component image responsive with display: block and max-width: 100% (this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover.

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

If you want to add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%. See the code below:

img {
mix-blend-mode: multiply;
opacity: 82%;}

✌️ I hope this helps you and happy coding!