How do I get rid of this white space on my product page?

Store Design
, ,

Topic summary

A user is experiencing unwanted white space on their product page that isn’t part of the uploaded product image.

Solution Provided:

Another community member offered CSS code to resolve the issue:

  • Navigate to Shopify admin → Online Store → Themes
  • Click Actions → Edit code on the active theme
  • Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
  • Add the following CSS at the bottom:
@media only screen and (max-width: 749px) {
  .product-media-container .media-container {
    padding-top: 70% !important;
  }
}
  • Save the changes

The helper included a screenshot showing the expected result after applying this fix. The issue appears to be related to responsive padding on mobile viewports (screens under 749px wide).

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

https://charmente.com/products/theultimatecosmeticbag

IMG_5264.jpg
IMG_5264.jpg1170Ă—2532 147 KB

The white space is not part of the image that I uploaded, how do I get rid of it?

1 Like
2

Hi @Simon159

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.product-media-container .media {
    padding-top: 70% !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!