Skip to content
Submitted 2 months ago

Product Preview Card

#bootstrap#pure-css
Pelumi Aiyebola•80
@Pelumi72
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 how I used the display property and my styling of the text perfume.

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

The only challenge I encountered was how to style the text. With a little research in the documentation, it was solved.

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

Any form of help to get better will be much appreciated.

Community feedback

  • P
    Boris•3,940
    @makogeborisPosted 2 months ago

    Great work, one thing you can improve is how you handle the image for small and larger screen sizes, using CSS to hide and show images to display differently on various screen sizes is not part of the best practices. Use the picture element to handle the responsive images effectively like so

    <picture>
  <source media="(max-width: 41.25rem)"
   srcset="images/image-product-mobile.jpg" />
   <img src="images/image-product-desktop.jpg" alt="A Perfume bottle" />
</picture>
    1
  • SHAKIR•90
    @shakirbakarePosted 2 months ago

    Hello Pelumi. You can increase padding to make your solution look more like the design.

    padding: 3rem; should do

    0

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