Responsive Product Page Using CSS, HTML, and Media Queries

Solution retrospective
I'm proud of the fact that I'm learning this stuff.
What challenges did you encounter, and how did you overcome them?Media queries took a little time to understand. Making the page responsive was the biggest learning curve.
What specific areas of your project would you like help with?I think I need help with image sizing and keeping everything within the container, but It'll probably come with practice.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @cdGuilherme
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 in
px
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
andmax-height
to 100% for theimg
element. -
You can switch images from desktop to mobile using the
<picture>
element with media queries.
Hope this can be useful! Good luck! 🙏
- Good job using the
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord