Submitted 8 months ago

A Mobile First Design with Css Flexbox

konja kuma sampson• 270

@DR-KSP-VIRUS

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, I am glad I have been able to complete this challenge.

However, I had trouble using the card image in the CSS. It made the design difficult for me. So I had to hard code with the <img> tag to hide and display based on the screen.

someone should help if there is a way I could do it.

Community feedback

Marcos Travaglini• 4,920

@Blackpachamame

Posted 8 months ago

Greetings! you have done a great job 😎

📌 Some suggestions

You can use the <picture> tag to change the image according to the screen size. More info
Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens
Use min-height: 100vh not height: 100% nor height: 100vh
margin-top: 2rem is not necessary in your product class for desktop screens, you can leave a margin: 1rem for mobile versions
You need to add the justify-content: center property in your product class so that it is centered

Marked as helpful

Please log in to post a comment

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