how to adjust the width of this one same with the page width

Store Design

Topic summary

A user is trying to adjust the width of product tabs on their Shopify store to match the page width of other sections. The issue is visible on their product page where the tabs section appears narrower than the rest of the content.

Multiple solutions proposed:

  • Adding CSS code to the base.css file targeting the main product container and media elements
  • Using custom CSS in the theme customizer specifically for the tabs section
  • Adjusting padding and max-width properties using CSS variables

Current problem:
When implementing the suggested CSS code, the product images become smaller than desired. The user has shared screenshots showing the width discrepancy and the unintended image sizing issue.

Recommended approach:
Experts suggest adding CSS to the Custom CSS section of the specific tab component (via Online Store > Theme > Customize) rather than the base.css file, to avoid affecting other page elements. The discussion remains ongoing as the user works to resolve the image sizing side effect.

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

niceeee_0-1695605309212.png
niceeee_0-1695605309212.png1891×899 172 KB

2

https://quick-start-999eac94.myshopify.com/products/elegoo-neptune-4-pro

pass: nayldu

3

HI @niceeee

This is David at SalesHunterThemes.

Follow this path:

Themes => edit code => asset => base.css

and add this code to bottom of the file base.css

#MainProduct-template--21097077571884__main {
max-width: 100%;
}

.product-media-container.constrain-height.media-fit-contain {
width: 100%;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

4

not working

5

Hi @niceeee

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

.product__info-container {

max-width: 100% !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

6

still the same, I want the product tabs to have same page width with other section

niceeee_0-1695612886178.png
niceeee_0-1695612886178.png1919×588 119 KB

7

Please add this code to Custom CSS of that section in Online store > Theme > Customize

.color-background-1 {
   max-width: var(--page-width);
   margin: 0 auto;
   padding: 0 1.5rem;
}
@media screen and (min-width: 750px) {
.color-background-1 {
   padding: 0 5rem;
}
}
8

Hi @niceeee

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

#MainProduct-template–21097077571884__main {padding: 0 !important;}

Regards,

San

9

after putting this code

the image of the product gets small, how to fix this one?

niceeee_0-1695619810671.png
niceeee_0-1695619810671.png1499×867 99.2 KB

10

Hi, did you added code to base.css file? Please add that code to Custom CSS of that tab section so the code will be applied to that tab only

11

Currently, I can’t access this URL store. Can you send it again so I can check it?