Make Main Product Image Full Width Mobile View

Store Design
,
1

Hi Community,

I am looking for code to make the main product image on the product page full-width in mobile view.

I am using the Be Yours theme.

The website is not live yet as I am just making final adjustments.

Thank you!

2

You can make the main product image full-width on mobile view in the Be Yours theme by adding a little custom CSS.

Go to Online Store > Themes > Edit code, and in your base.css (or theme.css) file, add the following snippet:

@media screen and (max-width: 749px) {
  .product__media-wrapper,
  .product__media,
  .product__media img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  .product__media-wrapper {
    margin: 0 auto;
    padding: 0;
  }
}

If this doesn’t work, please share your preview link so I can check it and provide the proper updated code. :white_check_mark:

3

Hi there,

Great question! Most Shopify themes, including Be Yours, set a max width on the main product image container for mobile. You can usually override this with a small CSS adjustment.

Try adding the following to your theme’s base.css (or theme.css, depending on your version):

/* Make main product image full-width on mobile */
@media screen and (max-width: 749px) {
.product__media-wrapper,
.product__media,
.product__media img {
width: 100%;
max-width: 100%;
}
}

This targets screens under 750 px wide and forces the wrapper and image to span the full width of the screen.

Since your store isn’t live yet, you can preview the changes by opening the theme editor, clicking Edit code, pasting this at the end of your CSS file, then previewing in an incognito window or mobile device.

:warning: Class names can vary a bit from theme to theme. If this doesn’t work right away, right-click on the main product image in your preview, choose Inspect, and copy the class name of the wrapper you see there. Replace .product__media-wrapper with that class in the code above.

Hope this helps you get the look you want

4

Try this code in the product info section “Custom CSS” setting:

@media (max-width:749px){
  .grid__item.product__media-wrapper {
    width: 100vw;
    margin-left: calc( 50% - 50vw );
    max-width: none;
  }
}

Tested agains theme demo store:

Screenshot 2025-09-28 at 12.03.22 AM
Screenshot 2025-09-28 at 12.03.22 AM415Ă—867 145 KB

Does not require editing theme code (as this will make future theme updates problematic) and does not use !important which makes further corrections difficult.

5

Could you please share your store Preview URL and password (if applicable) so that I can take a look and provide you the solution code?

Looking forward to hearing back from you.

Best,

Daniel

6

Perfect, thank you so much!

7

Thank you for your help. Much appreciated.

8

Thank you for your help.

9

Thank you so much, that is much appreciated.

10

Hi @LeanneJ12

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

If helpful, please like and accept the solution. :white_check_mark: