Skip to content
Submitted 18 days ago

Responsive Product Preview Card

#sass/scss#pure-css
Josh Kahlbaugh•110
@Joshk7
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I tried Sass/Scss by using nested selectors and variables to design this solution. Additionally, I learned a little bit more about making images responsive with the picture tag:
What challenges did you encounter, and how did you overcome them?

A challenge I ran into was deciding what tag to put the first word "Perfume" into as well as what tag to contain the larger $149.99 in. I settled on a span for "Perfume" and strong for $149.99.

Perfume
$149.99
What specific areas of your project would you like help with?

I struggled a little bit with deciding on whether to just use an img tag with srcset to multiple files or to use the picture tag. Any insight on what use cases are better for eitehr would be helpful.

Community feedback

  • Kellen James•150
    @KellenkjamesPosted 16 days ago

    Overall, great job with this project and matching your code to the design. It looks great responsively on modern screen sizes.

    If I could leave one piece of feedback it would be the following:

    Issue: The CSS currently lacks an explicit root font size, making it difficult to accurately calculate font sizes using rem units. This can lead to inconsistencies and potential accessibility issues.

    Recommendation: Add a root font size to the html element:

    html {
  font-size: 16px; /* Adjust the size as needed */
}

    This will establish a clear baseline for rem units, ensuring consistent font scaling across different screen sizes and user preferences.

    Here's an additional learning resource for using REM units: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/

    Keep up the great work!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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