Skip to content
Submitted over 1 year ago

Product Preview Card Component v1 - HTML, CSS, BEM CSS

Sarah Soares•30
@sarahsoaressilva
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

1.What did you find difficult while building the project?

  • The first difficult was how to change the image without using background-image using url(), because I wanted to use the alt description for accessibitity.

  • The second was how to do the padding at mobile version, since mine does not show the background behind the card.

2.Which areas of your code are you unsure of?

  • I will find a better way to create the responsive version on the future without media queries using just CSS Grid.

Community feedback

  • Durban86•320
    @Durban86Posted over 1 year ago

    Looks good except one small problem. Both the desktop and mobile images display next to each other when the viewport has a width of 681 - 699. You need to change line 141 of your CSS to @media (min-width: 681px) {

    This way you have no overlap where things may break, otherwise, it looks very nice

    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