Shop Sections in Dawn Theme Very Narrow - How to Make Full Width

I’ve just moved over to the Dawn theme and am working my way through it. However I’ve noticed that the ‘page’ sections are always narrower than all other sections that are added. Is there a way to make any added page sections the same width as all the other elements? Thank you!

Hello @enbc
Welcome to the Shopify community!
Please Share your store live url with password (if it password protected) where you want to do modification, so that I will solve your issue here!

Thank you - I only have it in preview mode at the moment as I’ve not published it yet but hopefully you can see the preview at:
https://od2b96mgglkvpqxb-15513871.shopifypreview.com/

Hi @enbc ,

.page-width.page-width--narrow {
    max-width: 150rem;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->base.scss.liquid

2 Likes

Oh that is wonderful - thank you so much!!!

Sorry to bother you again. The fix you gave me looks amazing on my monitor but on a laptop the edges of the text/images go right up to the side of the screen. Is there a way to force a small margin around the page?

I found it - don’t worry! Thank you!

Hi @enbc ,

still you have issue ?

I managed to work out how to add padding into the previous bit of code you gave me - which is great but I wondered if there’s a way of making it only the left and right (not top and bottom?) This is what I included in what you gave me.

.page-width.page-width–narrow {
max-width: 150rem;
padding: 4rem 4rem;
}

1 Like

@enbc ,

Just check on laptop view now it is ok !

Ok let me share screenshot if it is any issue !

I have been looking for a way to expand the margin on the pages on Dawn theme, but I am not finding base.scss.liquid anywhere in my code? I cannot put the change in until I can find that…

@taitery ,

Online Store->Theme->Edit code->Assets->base.scss.liquid

I can find base.css, but no base.scss or base.scss.liquid. As a reminder, I’m using Dawn theme. Can you help further?

@taitery ,

they are same.

I am more interested why they did that? Shopify design is mobile first and on mobile devices ‘page’ component is full width. But on desktop it is narrow. Purpose?

1 Like

@igorlevashov ,

The store link is not proper.

please share the issue and link.