Skip to content
Submitted almost 3 years ago

Responsive Product Preview Card using CSS

P
Odiesta Shandikarona•300
@Odiesta
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Code

Please log in to post a comment

Log in

Community feedback

  • Antoine Estievenart•240
    @Kehs719

    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

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