Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive ProductView card with Grid and Flexbox

@stepstodev

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@RestlessLizard

Posted

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

@stepstodev

Posted

@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
Discord logo

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