Skip to content
Submitted 6 months ago

Product preview card component

dewyrag•210
@dewyrag
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

What are you most proud of, and what would you do differently next time?

finishing this project with no help

What challenges did you encounter, and how did you overcome them?

Figuring out how to not have the image stick too 100% in media queries, and figuring out how to have the text not overflow the white box in media queries. I seperated the image and the text so the text would not overflow whenever i used flex-direction row in media.

What specific areas of your project would you like help with?

When I did display flex, flex-direction row in media quieres the image was shrunk in the white box because the width was stuck to 100% of the parent. How would I avoid this next time.

Also can anyone look at my code and give me tips on what I could've done differently? And how I could've done this better.

Community feedback

  • AdrienneAEW•90
    @AdrienneAEWPosted 6 months ago

    You actually did a wonderful job on the challenge. The best way to get the hang of it all is to keep practicing and don't be afraid to make mistakes - you can learn a lot from mistakes.

    If you put a width on the parent (image-card) the image will only be 100% of the parent. I didn't see a width for the parent in your code. This is one solutions for stopping the image from crushing the white box.

    Keep on coding you have a real knack for it. All the best to you!

    Marked as helpful
    1
  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 👋

    a few layout tips:

    • you can set your paddings and margins using rem and em as well, this way these values will scale up with the font-size, when you increase them in @media queries
    • use line-height without parameters, so the element's line height will adapt to its font-size -when centering the content using Flexbox on the body it's better to use min-height. using height: 100vh will prevent users scrolling down on smaller screen sizes even if your content overflowing.

    Hope this helps 🙏

    Good luck and happy coding! 💪

    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