Skip to content
Submitted 6 months ago

ProductCard

Kubai James Karomo•20
@kj728
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?

I was able to make the card responsive and it looks good.

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

Knowing how to use media queries. I used w3Schools as a reference.

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

I am used to using px to define width and height but they are not good with responsive design. I would like to know how to use em, rem and fr.

Community feedback

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 👋👋

    You should avoid hard-coded values (pixels) most of the time. When you use these values you give up responsiveness(or you make it harder for yourself at least)..

    Typically you will increase the font-size property with @media queries. If you have hard-coded values all over your CSS, you need to modify every element's font-size . On the other hand, if you use rem -s all you need to do is changing the font-size in your CSS :root selector and all your elements will have a new size based on that value.

    I usually use em for padding and margin for text-based elements, since their margin usually based on their font-size , and again, when you change the font-size in :root these values will scale up as well without you touching them, making your job easier and your page maintainable.

    If you are not familiar with the :root selector it's usually used to set custom properties(others call them CSS variables ) that you can apply later.

    fr can't be used like this, only within CSS Grid

    Hope this helped 🙏

    Good luck and happy coding! 💪

    Marked as helpful
    0
    Kubai James Karomo•20
    @kj728Posted 6 months ago

    @kodan96 Thanks for your feedback and I will use the tips that you have given in my current project and going forward.

    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