Skip to content
Submitted about 2 years ago

Responsive ProductView card with Grid and Flexbox

StepsSensation•20
@stepstodev
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

The MediaQuery is only for mobiel till 375px and Desktop-Version. I dont know if this is the best solution. What will be better solution instead. Just using Flex. I used it both together. maybe i could have declare some variables for colors and fonts.

Community feedback

  • relizard•80
    @RestlessLizardPosted about 2 years ago

    Hi, I would use 640px as a breakpoint for mobile (everything below is a mobile). I've taken that value from tailwind CSS and it works great across different mobile devices I've tried. 375px breakpoint is too small, it does not work on my pretty standard 6.7" phone. About the colors, I would definitely prefer to use variables. Never thought of using variables for the fonts, so thank you for an interesting idea :)

    Marked as helpful
    0
    StepsSensation•20
    @stepstodevPosted about 2 years ago

    @RestlessLizard Hi, thanks for your reply. I didn't know that everything below 640px is a mobile. I will keep this in mind for later projects and also using variables for fonts and colors. I could have do this, but i was not sure about it.

    Thank you

    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