Responsive solution using CSS Grid and Flexbox

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, a few tips in case you want to take a look:

  HTML, ACCESSIBILITY:

  • To show different images depending on the device or screen size, the <picture> element is ideal:

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

  • It would be better to capitalize 'Perfume' with CSS (using text-transform: uppercase;) and not in HTML, for accesibility reasons.

  CSS:

  • You might consider using relative units like rem or em since they are better for scalable layouts, pixels may not be the best alternative because absolute units don’t scale. You could easily start converting to rem (1 rem equals the root's font size, 16px by default), especially font-size.

  I hope you find it useful, any questions do not hesitate 🙂

  Regards,

  Marked as helpful

  1

  ---

  

  Samara Silva•70

  @samarasilva18Posted over 1 year ago

  @fernandolapaz

  I see!! Thanks a lot for the tips, I was trying to figure out a way to change the picture depending on screen size for a while! I'll try and use relative units more, too... admittedly I've been avoiding those because I couldn't figure out how they worked, ha. I guess I'll only learn by doing it more often!

  I'll try to make the uppercase changes for better accessibility too! Thanks a ton for the feedback!

  0

  

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  @samarasilva18 I'm glad if it helped you! Any questions don't hesitate.

  1