Trade theme - How to make containers for everything full width of the page?

Store Design
,
1

Does anyone know how to make is to that the overall container of the heading, body, footer, etc are all the full width of the webpage?

1 Like
2

Hello @weewee ,

I hope you are doing well!

Yes! Can you please provide the use case and your requirement so that I can fix it for you?

3

I ended up using this code in base.css and it seems to be working

.page-width,

.container,

.wrapper {

max-width: 90% !important;

width: 90% !important;

padding-left: 0 !important;

padding-right: 0 !important;

}

5

Yeah! It will work! If you have any questions, feel free to reply here or message me.

6

What kind of monitor you have? Have you tried looking at your site on an ultrawide monitor?
Can be a literally eye-opening experience :slight_smile:

7

Hello @weewee

In Shopify themes (including Dawn), most sections are wrapped inside a .page-width container which limits them to a max-width (usually around 1200px).

If you want your heading, body, footer, etc. containers to stretch full width of the screen, you need to override or remove that .page-width restriction.

Option 1: CSS Override

Add this to your theme’s custom CSS file (base.css or custom.css):

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

Option 2: Section-Specific Full Width

If you don’t want every section to be full width, but only certain ones:

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

Note: If you’d like my help with these implementations, feel free to contact me at devcodersp@gmail.com

8

I didn’t think about that. I am on a laptop. I did play around with it and didn’t set it to 100%, but I did increase the width of it.