Dawn Theme - Changing Width of pages to full width

Solved
AmoreBouquets
Tourist
8 0 3

Hi All,

The default Dawn Theme pages is quite narrow, how can i change the width for all pages so that it is full width?

please see my site for example of it being narrow
The link to the site is www.amorebouquets.com.au, password is aotwew.

 

Example site, where all pages are full width https://eagleisabirdie.com/

 

Thanks


Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 839 892

This is an accepted solution.

Hi @AmoreBouquets ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

 

.page-width {
    max-width: 160rem !important;
}

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

View solution in original post

Replies 4 (4)
AvadaCommerce
Shopify Partner
3879 839 892

This is an accepted solution.

Hi @AmoreBouquets ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

 

.page-width {
    max-width: 160rem !important;
}

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

Lin77
Visitor
2 0 1

Hello, I only want to adjust the body width of the blog and new pages, and I don't want to adjust the body width of the homepage and product pages. How to set it up?

filmxlab
Visitor
3 0 2

I know this question is about a year old now. But I ran into this problem of needing to adjust the width of the blog only and not the entire site. The previous solution suggested putting the code in the base.css which changes the entire site but putting the code in the section-blog-post.css changes the blog width and nothing else.

 

1. Go to Online Store->Theme->Edit code
2. Asset->/section-blog-post.css->paste below code at the bottom of the file:

 

.page-width {
    max-width: 60% !important;
}

 

I did 60% since it was much wider than default without being entirely full width. Play around with the percentage values to find what fits your need.

NachoBCN12
Tourist
18 1 3

Im trying to do something similar; I madre my page full width and it look nice; but when i try to see a page i want to have padding. I tried to change section-main-page.css and it works; but the header is also making the padding. How can I do to just put the padding on the content and not on the header?

 

https://bcnsurfschool.es/pages/comunidadbcnsurfschool