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 Flexbox

Alexandra P.• 10

@alexandra-perez

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


  • Originally I struggled with optimizing for mobile/using CSS media query, since I built this with desktop-viewing in mind first.

Community feedback

Jatin Ahluwalia• 170

@jatinahluwalia

Posted

Hey! Great work! For your size of the card, as we know by default <main> element takes up full width of it's container which is <body> in this case. To fix this you can give your body a display of flex and center the card using justify content and align items property on <body> element so that your product card now has a dynamic width and height based on it's content and it's also center on the screen. Hope this helps! You can also see my solution from my profile for this problem for reference!

Marked as helpful

0

Alexandra P.• 10

@alexandra-perez

Posted

@jitu2404 I will try this out! Thank you!

0
Luis matos• 190

@Aedan5621

Posted

Hello, you can declare the height and width of the container and the image until they meet your expectations, i don't think it's the best practice but it works, over time you can find other ways to do it, I'm in the same situation. For more information about the media queries, . Check this video to learn about the CSS Media Queries (https://youtu.be/2KL-z9A56SQ)

0

Alexandra P.• 10

@alexandra-perez

Posted

@Aedan5621 Hi thanks for linking this video as I'm learning CSS basics but haven't yet come across anything on media queries so this was helpful!

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