Skip to content
Submitted about 2 years ago

Responsive product preview card component using CSS grid & flexbox

accessibility, webflow
P
Natalie Smyth•340
@nataliesmyth
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This project reminded me about some css fundamentals that I learned when I started learning web development, but haven't used enough to use properly.

One of my questions has to do with the approach of this project: when I first learned html and css, I learned through building websites for desktop computers, but every other source I've seen since has argued for mobile first approach. When I started this challenge, ran into some obstacles after trying to construct my html from a mobile-first perspective rather than the desktop version. Is this something that gets easier with time and practice, or is there something fundamental that I'm missing?

Code

Please log in to post a comment

Log in

Community feedback

  • Steve•1,170
    @peanutbutterjlly

    hey 👋,

    its heavily preached to do a mobile-first design (and for valid reasons) but when I do projects here I usually do a desktop first design to bang out solutions quickly as its easier for me to work that way - I primarily do desktop web-apps for a living so its just how my brain works most the time.

    I try and do a mobile-first approach on my personal projects but that doesn't always go as planned 🥴.

    your solution looks great but I would just change some body styles:

    body {
min-height: 100vh;
}

    you have it currently set at 100vw and that's why the body takes up so much space.

    keep up the good work 👍

    Marked as helpful

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