Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card using flexbox

ivara21 120

@ivara21

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

Posted

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
Discord logo

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