Frontend Mentor | fernandanevesf's profile

@fernandanevesf

Posted almost 2 years ago

Hello, congratulations on completing the challenge! Let's have a look at what you can improve next time:

It's a good practice to make the mobile design first and then add a media query for the desktop version.
In the picture tag, you just need one breakpoint to indicate when the design will go from mobile to desktop. Use min-width, now max. In other words, it would look like this:

<source media="(min-width:768px )" srcset="images/image-product-desktop.jpg"> <img src="images/image-product-mobile.jpg" alt="Perfume">

The same goes for the media query. The syntax is also incomplete, it should look like this:

@media only screen and (min-width:768px) (Here is a tutorial on media queries)

However, it's a better idea to use em or rem instead of pixels, what takes us to the next point:

Don't use pixels or other absolute units for dimensions, it doesn't make your page responsive. You should be using mostly em or rem. You can read about CSS units here.
To make the image responsive, don't add height and width. Instead, give it max-width: 100% and object-fit: contain .
Double-check the font sizes and line height of the text. The bigger heading looks noticeably smaller than the design's, and the paragraph's lines look too close to each other.
You're missing the active state for the button. You're going to need cursor: pointer and the :hover pseudo-class with the darker background color.

I hope this helps, and keep it up!

Marked as helpful

fernandanevesf