How can I maximize product image size on mobile view?

[collins276]

Hi,

How can I scale up the Product picture size so it can cover the container (blue frame) completely in mobile view.

Please check my url: https://189ee3-2.myshopify.com/products/tank-top-1

Thank you!

[BSS-Commerce]

Hi @collins276 ,

When I use devtool this is what I see. It seems like your real problem is that the element containing your image has a #00f background.

Please do the following:

In the Online store, select Themes → … (button next to the Customize button) → Edit code

In base.css, add the following code at the end of the file

@media only screen and (max-width: 749px) {
  .product-media-container {
    background-color: rgb(var(--color-background))!important;
    width: 100%!important;
    height: 100%!important;
}
}

Click Save to save changes.

Result:

[collins276]

Thank you! I just colored it blue on purpose for easier recognition. The problem is the gap in the slider (as the picture below) but I got it covered