Skip to content
Submitted 10 months ago

A Mobile First Design with Css Flexbox

konja kuma sampsonā€¢270
@DR-KSP-VIRUS
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

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,840
    @BlackpachamamePosted 10 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
    1

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