Stats Preview card

Community feedback

• 

  Huy Phan•2,300

  @huyphan2210Posted 17 days ago

  Hi, @arsh-de

  I checked out your solution, and I also saw your question. Here's my attempt to answer it:

  • Responsive Background Image: Currently, you’re using background: url(images/image-header-mobile.jpg) no-repeat center/cover on .img-container, which sets background-size: cover. To make the image responsive based on the viewport width, try background-size: 100vw instead. This makes the image’s width equivalent to the viewport width. You can adjust 100 to achieve the exact size you want.
  • Container Responsiveness: You might notice that setting background-size to 100vw makes the image responsive to the viewport but not to its container (.img-container). This can sometimes lead to unintended results. A more flexible approach is to keep the image as a background on .img-container (as you have it) and focus on making .img-container responsive instead. Since .container (its parent) has max-width: 900px, adjusting this value can help make .img-container more responsive.
  • Using an <img> Tag: Alternatively, using an <img> tag instead of background-image can simplify things, allowing you to set its width and height directly with viewport units if needed. This approach can make it easier to control responsiveness.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Arsh•290

  @arsh-dePosted 16 days ago

  @huyphan2210 Thank you for review, I will try this in my future projects. Regards1

  1