CSS HTML

Community feedback

• 

  fernandanevesf•160

  @fernandanevesfPosted over 1 year 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

  1