Responsive Product Page Using CSS, HTML, and Media Queries

Community feedback

• 

  nanikore0•100

  @nanikore0Posted 6 months ago

  Hi Eric, great job on submitting your solution!

  Here are my suggestions:

  Does the solution include semantic HTML?

  • Good job using the <main> element. This is good for accessibility as it helps screen readers identify a page's "main" section.

  Is it accessible, and what improvements could be made?

  • <grid> and <p3> are not valid HTML elements, instead use a div with a class for the price container and use h2 and h3 elements for the prices.
  • Font sizes must never be inpx as it prevents the font size from scaling with the user's default setting.

  Does the layout look good on a range of screen sizes?

  • The layout breaks on some screen sizes. I suggest removing fixed widths and heights, this is something you should rarely do because components should be able to adapt for different screen sizes.
  • Other than that you did a good job with flexbox for the container, it adapts well when changing from column to row on different screen sizes.

  Is the code well-structured, readable, and reusable?

  • For better reusability, you can store colors inside CSS variables using the :root pseudo-class.

  Does the solution differ considerably from the design?

  • Desktop viewing is too wide, I would suggest decreasing the container width using the max-width property.

  • As for the image sizing I suggest setting a max-width and max-height to 100% for the img element.

  • You can switch images from desktop to mobile using the <picture> element with media queries.

  Hope this can be useful! Good luck! 🙏

  0