Can I change the width of specific sections in Dawn theme?

[apprivio]

Hello, can anyone please advise me if it is possible to change the width of sections in the Dawn theme? 

Specifically featured products width. 

I have a theme layout set for 1200px and I like the look of that but I'd love to increase the width of the featured collection and rich text to 1600px as I like that look on those specific sections better while all the rest remains 1200px.

Thank you very much for any tips! 

[suyash1]

@apprivio - we can use the specific section id to try it, but this will be section specific so other sections are not changed and once you remove this section , code will not work if you add new

[Rabbyte]

You can do this by adding CSS rules assigned to specific sections. When you set a section, it has a specific ID. You have to check this ID (in the page source) and add a rule assigned to it. For example:

#shopify-section-template--15488324829356__featured_collection {
  --page-width: 1600px;
}

[AvadaCommerce]

Hi @apprivio ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[apprivio]

Store it is:

ID: Apprivio

Password: freege

In these two sections, I would like to adjust the width to 1600px. 

Rich text and featured products. 

Thank you very much for your help.

[AvadaCommerce · Accepted solution]

Hi @apprivio ,

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:

@media (min-width: 990px) {
    #shopify-section-template--15424042991834__rich_text,
    #shopify-section-template--15424042991834__featured_products {
        --page-width: 1600px !important;
    }
    #shopify-section-template--15424042991834__rich_text .rich-text__blocks {
        max-width: 100% !important;
    }
}

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

[apprivio]

Thank you very much for your help! 

Have a nice rest of your day 🙂

[KseniiaDenysova]

Hi, 

I have almost the same question - except I need to have header 1600 px, and the whole website is 1300px.

What I should write then into the code?

[Rabbyte]

@KseniiaDenysova Please add your store URL here and if your store is password protected then please provide password too.

[KseniiaDenysova]

https://louiza-jewellery.myshopify.com/ 
Password: louiza

[suyash1]

@KseniiaDenysova - I checked your header, it does not have any specific width set, it will change as per the screen size,  I think your screen is 1300px hence it shows width 1300px, if you have bigger screen then it would be bigger

[KseniiaDenysova]

Yes, of course 🙂 This I understand, but I need ONLY header to be 1600px, the rest of the website should stay as it is (1300px)

[suyash1]

@KseniiaDenysova - please add this css to the very end of your base.css file and check , this will set header to maximum width 1600px even if screen goes beyond that.

.header{max-width:1600px;}

[KseniiaDenysova]

Thank you so much! It works perfectly!

[suyash1]

@KseniiaDenysova - if you need any more updates then you can send message here or you have my email below.

[ShopCom]

Can this be applied to just all product pages?  Right now the maximum width of our product page is 1600px, where is the line of code so we can add a custom value?  We would like to change it to 1800px.

Ideally, we would like the product page width to always be the maximum width depending on the browser window size.  Until the browser window is larger than maybe 1800px-2000px, the product page width should always be at max width, taking up the full width of the browser window.  After 1800-2000px, the extra space on the sides would appear.

[paule3]

Hi I was wondering if you could help me. I am trying to increase the width of the text section at the bottom of my homepage to the size of the carbon neutral deliveries banner above the text . My website address is www.stylecentral.co.uk