Preview Card Main with CSS

Community feedback

• 

  OL•40

  @OlamideLanrePosted 4 months ago

  *the image should be in the container div instead of a span, so when you display flex it automatically placed side by side with your product-details *use line-height css property to reduce the spacing between the bold text

  • next time do not give your main container a height so your items can grow or shrink with its size. In your solution the image is bigger than the div, making it seem like it's outside

  1

  ---

  

  jkaps9•140

  @jkaps9Posted 4 months ago

  @OlamideLanre I really appreciate your feedback. I did update the code after I submitted to remove the height in the main tag and make some other adjustments. I had added the span because without it the image didn't size correctly on Firefox. To be fair I do see now that it's a bit bigger but it's way better than before where on Firefox the image was super small in the desktop layout. Any advice on how to get the image to match with the rest of the content? Just removing the span tag isn't doing it for me.

  0

  

  OL•40

  @OlamideLanrePosted 4 months ago

  @jkaps9 I just viewed the site, it's looking pretty good on chrome but I'd say reduce the size of the image, just give it a width but the value should be in percentage. Also you could either increase the max width of you container a little and give the bold text a width property with ch relative unit value till the texts looks like the same as the one in the design.

  0

  

  jkaps9•140

  @jkaps9Posted 4 months ago

  @OlamideLanre I'll give it a shot later thank you!

  0