Skip to content
Submitted about 1 month ago

Product-preview-card-component

P
Bruno Banoczi-Cs•50
@L4r4TW
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'm most proud of the almost perfect looking design, and good responsivity. Next time maybe I should use more responsive properties instead of px, but using px makes it easier to create really similar design like in the figma file.

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

Making the elements fit perfectly into phone screen was hard, but with chatGPT and StackOverflow, I figured out a pretty good solution.

What specific areas of your project would you like help with?
  • Should I make my project pixel perfectly look like the figma desig? The size of elements and spaces are given in px in figma. Shlould I use this px parameters, or use more responsive ones, like em, rem, % etc.

Community feedback

  • Alper•1,090
    @adonmez04Posted about 1 month ago

    Hi, Bruno. That is a good question. You can use;

    • the rem unit for the font-size.
    • the em unit for the padding.
    • the px unit for the margin, border, radius etc.

    The point of using relative or absolute length units is that we want to know which element can or can't change its size. If we want users to be able to change the size of fonts, we can use the rem unit... On the other hand, if we don't want to change the size of the margin or the border radius, we can use the pixel unit. The em unit refers to the current element's font size, and most of the time it is very useful to use em for padding, but as a beginner you can use rem instead.

    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