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

Product preview card using html and css flexbox

Alexis 70

@alexisshy

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


Any feedback would be appreciated

Community feedback

Daniel 🛸 44,190

@danielmrz-dev

Posted

Looks great!

If you want to center the card, both horizontally and vertically, try that:

body { height: 100vh; display: flex; align-items: center; justify-content: center; }

And about making it responsible for mobile devices, media queries help with that :)

Hope it helps!

Marked as helpful

0

Alexis 70

@alexisshy

Posted

Thank you so much for your help! I will definitely apply this. @danielmrz-dev

1
MartinXCVI 150

@MartinXCVI

Posted

Hi! The card looks pretty good - I would suggest you to get used to applying the proper HTML semantic tags. Wrapping it all inside a <main> instead of a <div>, setting its height to 100vh, and centering your card by flexing its parent element. This will make it more comfortable for viewers to enjoy this project. I hope this helps you!

Marked as helpful

0

Alexis 70

@alexisshy

Posted

Hey thank you so much! This is definitely helpful, I will apply this. @MartinXCVI

1

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