Skip to content
Submitted about 1 year ago

Responsive Product Card

P
Matthew•360
@MattJM1007
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Overall this was a fairly straight forward build.

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

I am still struggling with getting the spacing just right between elements with padding and margins. I feel like there should be an easier way to do it. I also find that the text doesn't look exactly like the design file, even though I put in the same font and properties that are in the design. I am not sure why this is.

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

Can anyone provide tips on how to format/layout the text elements? Is there a better option than what I did? Also, how are my media queries? Anything I can improve there?

Code

Please log in to post a comment

Log in

Community feedback

  • Martín Beltrán•260
    @JMBeltranDev

    Note that to use different image sizes, you load them simultaneously, and in the media query, you use a display:none. This implies that if you open the page on a mobile device, the desktop-sized image is still loaded, which has an impact on performance. The following code is an example of how the image would be loaded depending on the screen size. <picture class="product__img"> <source media="(min-width:600px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt="perfume imagen"> </picture>

    Marked as helpful
  • Koda👹•3,830
    @kodan96

    hi there! 👋👋

    Instead of adding margin to all the child elements you can just add padding to the parent container, and that will line up your text nicely.

    Also it's a good idea to set margins and paddings using relative units (em, rem, ch, etc), since usually their size depends on the element's size (headings for example usually have their own font-size as margins above and below them, unless they are extremely large)

    And I wouldn't use hard-coded values (pixels) for setting width or height.Actually don't even set them. Parent elements will always include child element's content by default, it's better to let the child elements determine the height of the parent, hard-coding heights can cause overflow.

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    Marked as helpful
  • Koda👹•3,830
    @kodan96

    Sorry, I actually lied (I mean, so-so). You can set min-width and/or max-width on your elements, so they won't shrink below or grow above a certain value. My bad 🙇‍♂️

  • rafi b•260
    @raficode2303

    as @kodan96 said, try to not use fixed sizes to solve ptoblem. it make the site look like an fixed image and not responsive for all devices, remeber css is responsive by default. by adding fixed sizes you make it un-responsive. you use codes like margin: 19px 19px 19px; in many tags, padding to the parent container is best practice as @kodan96 mentioned. using css flex/grid is more modern soultion. you will achive more with less code. keep to improve and keep to build 👷

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