Need help in reducing the right margin on product page.

[TJ2022]

Need help in reducing the right margin on product page. Settings are fine. I think I need to change some code. Can you guys help. PFA. Thanks!

  

[rajweb]

Hey @TJ2022 ,

Welcome to the Shopify Community!

Thanks for the screenshot and the code! Based on the image and your CSS snippet, it looks like there's unnecessary right spacing (probably due to padding or margin applied by the theme layout or container classes).

Here’s how we can debug and fix it:

Try This CSS Override:

- Add the following to your theme’s custom CSS area (Online Store > Themes > Customize > Theme settings > Custom CSS) or inside your base.css or theme.css:

#shopify-section-template--17886088659122__main .page-width,
#shopify-section-template--17886088659122__main .product__info-wrapper {
    padding-right: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

If your theme uses a grid layout like grid--1-col, you might also need:

#shopify-section-template--17886088659122__main .grid {
    gap: 0 !important;
}

Mobile Consideration (Optional)

To ensure responsiveness, wrap overrides in media queries if needed:

@media (min-width: 768px) {
  #shopify-section-template--17886088659122__main .product__info-wrapper {
    max-width: 100%;
  }
}

Best Regards,

Rajat

Shopify Expert

[Bundler-Manuel]

Hello there TJ @TJ2022  Here are the steps you should take in solving this issue.

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

slider-component.slider-mobile-gutter.page-width.page-width-desktop {

    padding: 0 !important;

}

Let me know if this works for you!

[Dan-From-Ryviu · Accepted solution]

Hi @TJ2022 

Please open your section-main-product.css, find this code 

  .product__info-container {
    max-width: 60rem;
  }

Change 60rem in the code to 100% and save your file

[TJ2022]

Thanks a lot, I tried it and it worked 

[TJ2022]

and can you also help in removing the background color behind add to cart. 

 

[Dan-From-Ryviu]

Please use this code

.product__title h1 { font-size: 22px !important; }
.product-form__submit span { background-color: transparent !important; }

[TJ2022]

can you also tell me how to reduce the size of the title of the product?

[namphan]

Hi @TJ2022,

Please go to Customize > Sections > Image with text > Custom CSS > Add code:

@media screen and (min-width: 750px) {
.image-with-text__content {
    padding-right: 0;
}
}

[StrokeInfotech]

Hi @TJ2022  👋,

Absolutely! If your theme settings look fine but you're still seeing a large right margin on the product page, the issue might be caused by a max-width restriction on the container element.

Here’s how you can fix it:

Step 1 :- Go to your Shopify Admin.

Step 2 :- Navigate to Online Store > Themes.

Step 3 :- Click “Edit code” on your active theme.

Step 4 :- In the Assets folder, open the file named section-main-product.css (or similar, depending on your theme).

Step 5 :- Search for this CSS class:

.product__info-container {
  max-width: 60rem;
}

If the max-width is set to a smaller value like 60rem, it could be limiting the content width and visually creating that extra margin. Try updating it to:

.product__info-container {
  max-width: 100%;
}

This change will allow the container to use the full available width, which should help eliminate the unwanted space on the right side.

Step 6 :- Save the changes and refresh your product page to see the update.

Let me know if you need further assistance!