FROM CACHE - en_header

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

Solved
enbc
Tourist
15 0 1

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!

 

Screenshot 2021-09-16 at 09.28.11.png

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
12120 1883 2416

This is an accepted solution.

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 13 (13)
oscprofessional
Shopify Partner
12120 1883 2416

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!

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
enbc
Tourist
15 0 1

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/

oscprofessional
Shopify Partner
12120 1883 2416

This is an accepted solution.

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
enbc
Tourist
15 0 1

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

enbc
Tourist
15 0 1

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?

enbc
Tourist
15 0 1

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

oscprofessional
Shopify Partner
12120 1883 2416

Hi @enbc ,

still you have issue ?

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
enbc
Tourist
15 0 1

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;

oscprofessional
Shopify Partner
12120 1883 2416

@enbc ,

Just check on laptop view now it is ok !

Ok let me share screenshot if it is any issue !

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
taitery
Tourist
4 0 4

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....

oscprofessional
Shopify Partner
12120 1883 2416

@taitery ,

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
taitery
Tourist
4 0 4

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?

oscprofessional
Shopify Partner
12120 1883 2416

@taitery,

they are same.

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing