Skip to content
Submitted 12 months ago

Product preview card using flexbox

ivara21•120
@ivara21
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

hi everyone i need some lil help, between 375px to 530px on responsive design , the image shrinks too fast and i didnt figure out it yet my laptops getting low battery , can someone please comment whats the problem and ill get back to it later when ill have time :) thanks in advance.

Community feedback

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 12 months ago

    Hi Ivara, good job!

    In response to your question, the easiest solution is to set min-width: 560px;.

    And, as a suggestion for improvement, consider use the picture tag that it gives you more flexibility in specifying image resources depending of your resolution. Here an example:

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

    I hope these are helpful to you.

    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