Skip to content
Submitted over 2 years ago

Responsive Product Preview Card using html CSS Flexbox

Earfworm•10
@Earfworm
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

How to build mobile first layouts? How to improve page layouts in general? Any flexbox tips? Any feedback and tips would be much appreciated.

Thank you,

Earfworm

Community feedback

  • BADHRI KESAVA RAJA S M•515
    @BadhrikrPosted over 2 years ago

    Hello your solution is superb,

    My only suggestion is ,Apply these to your stylesheet

    body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

    use picture tag to display images on different viewport width

    <picture>
      <source media="(min-width: 775px)" srcset="./images/image-product-desktop.jpg">
      <img src="./images/image-product-mobile.jpg" alt="">
</picture>

    Check out this link

    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