Skip to content
Submitted over 2 years ago

Responsive Product Preview Card using CSS

Odiesta•100
@Odiesta
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

I find it difficult to center and position the image and text content side by side

Community feedback

  • Antoine Estievenart•240
    @Kehs719Posted over 2 years ago

    This is a very nice submission @Odiesta, the size of the card is respected which is very nice.

    However there are a few things to improve to make it perfect :

    • For the image that changes depending the device's screen size you can create a div and add the CSS property background-image: url(./images/...) ;.

    • To avoid accessibility errors wrap your HTML body into a main tag :

    <body>
     <main>...</main>
</body>

    For the rest it is very good.

    Keep improving and happy Coding

    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