Responsive Product preview card component using HTML, CSS(Flexbox).

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello John Carlo, congratulations for your solution!

  You're having an issue with the component version mobile, when it starts to scale down the text content starts to pop up from the container, because you've set a fixed height, if you want to avoid it just remove the height and let its contents as text and images give the container/div its height.

  See what is causing the issue:

  .Product-Box {
      /* height: 720px; */
  }
  

  Add the color white to the card component to give a little bit of contrast between the background and the card.

  Hope it helps and happy coding!

  Marked as helpful

  0

  ---

  

  John Carlo•170

  @JohnCarloCanadaPosted over 2 years ago

  @correlucas Thanks sir for the advice it worked.

  1

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @JohnCarlo952 You're welcome John!

  0
• 

  Mike Odhiambo•100

  @MikeOdhiamboPosted over 2 years ago

  Hi @JohnCarlo952. You could try having the image as the background image for that div, then when you're doing media queries, change the background URL to the mobile image.

  Another option is to use the HTML image "srcset" attribute.

  0

  ---

  

  JO•60

  @myspace8Posted over 2 years ago

  @MikeOdhiambo I tried to do that - apply the image in css using background image. But the image does not appear unless the div has has content like a text. Is there any way around that?

  0

  

  Mike Odhiambo•100

  @MikeOdhiamboPosted over 2 years ago

  @myspace8 Giv the div height and width values.

  0

  

  John Carlo•170

  @JohnCarloCanadaPosted over 2 years ago

  @MikeOdhiambo Thank sir, ill have this noted

  0