Container Width

Store Design

Topic summary

Goal: Make the homepage main banner and grey NHS section span full width across all devices. The constraint appears to be padding/margins on the main container (“main wrapper”).

Proposed fix: Add a CSS override in theme.liquid (the store’s main layout file) before the closing to set main.wrapper.main-content to padding: 0, margin: 0, width: 100%, and max-width: 100%. A screenshot was shared showing the full-width result. The code snippet is central to the solution.

Caveat: Another contributor warns that removing padding on the main wrapper affects the entire page layout (“the entire page will move”) and asks if that site-wide change is acceptable. This highlights a potential global impact beyond the targeted sections.

Notes: CSS (style rules for layout) and the “main wrapper” (container around main content) are key terms here. Images showing before/after are important to understanding the effect.

Status: Partially addressed with a working CSS approach, but unresolved pending confirmation on whether the global layout change is acceptable.

Summarized with AI on December 11. AI used: gpt-5.
1

image
image1920×923 223 KB

On our site: www.physioworldshop.co.uk/ we want the main banner and grey NHS section to go full width on all devices.

It is something to do with the padding/margin on the “main container”.

How do we get it full width?

1 Like
2

Hey @ChrisW3

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
main.wrapper.main-content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
</style>

RESULT:

image
image1906×890 216 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

@ChrisW3 - it is due to padding to main wrapper, it can be removed but then entire page will move, is it ok?

4

Hi,

Hope this will help

  • First check your theme customizer,many themes have a built-in full width or full-bleed option.If not add a small CSS

CSS example

.nhs-banner {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  background: #efefef;
}
.nhs-banner .inner { max-width: 1100px; margin:0 auto; padding: 10px 16px; }

  • For best results use a full-bleed background while keeping an inner .inner or .page-width container to constrain text and buttons.

  • Inspect the section class add CSS to your theme’s stylesheet or Custom CSS, test on desktop and mobile.

5

You’re right the issue comes from the theme’s main container adding default padding and a max-width.

To make the banner + NHS section full-width, you can override it with custom CSS:

.main-container,
.container,
.page-width {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}

If your theme wraps the banner in its own section container, you may also need:

.section,
.shopify-section {
margin-left: 0 !important;
margin-right: 0 !important;
}

Add this to Online Store → Themes → Edit code → base.css (or theme.css).

That will force those sections to stretch 100% width across all devices.

If it still doesn’t look right, send your theme name and I’ll guide you exactly

6

Please add this code to Custom CSS in your theme settings.

#shopify-section-advanced_content_7nFJyp .nhs-fullwidth,
main.main-content {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#shopify-section-advanced_content_7nFJyp .custom-content {
margin: 0;
}
#shopify-section-advanced_content_7nFJyp .custom-content .custom__item { padding: 0; }

Screenshot 2025-12-12 at 10.02.35
Screenshot 2025-12-12 at 10.02.351920×1027 232 KB

Best regards,
Dan from Ryviu: Product Reviews App

7

Hi, @ChrisW3
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
.wrapper.main-content{
   padding: 0 !important;
    margin: 0  !important;
    max-width: 100%  !important;
}
.custom-content {
   margin-left: 0 !important;
}
</style>

Results:

image
image1920×901 214 KB

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

8

Hey!

You’re right — the padding/margin on the main container is what’s stopping your homepage banner and the grey NHS block from going full width.

Most Shopify themes wrap sections inside a .page-width or .container class, which adds left/right padding. To make those two sections stretch edge-to-edge, you can override that container just for those blocks.

Here’s what you can do:

  1. Go to Online Store → Themes → Edit code

  2. Open base.css (or theme.css/theme.css.liquid depending on your theme)

  3. Add this at the bottom:

/* Make hero banner + NHS strip full width */
.full-width-section {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
  1. Then, in the theme editor, open the banner section → Add custom CSS (or add a custom class field if your theme supports it):
full-width-section

Let me know if you have any questions?

Mandasa Technologies