Solved

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

apprivio
Tourist
3 0 1

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! 

Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 839 956

This is an 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.

banned

View solution in original post

Replies 16 (16)

suyash1
Shopify Partner
9137 1137 1485

@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

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

Rabbyte
Shopify Partner
45 4 16

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
Shopify Partner
3879 839 956

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.

banned
apprivio
Tourist
3 0 1

Store it is:

 

ID: Apprivio

Password: freege

 

Sections.jpg

 

 

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
Shopify Partner
3879 839 956

This is an 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.

banned
apprivio
Tourist
3 0 1

Thank you very much for your help! 

Have a nice rest of your day 🙂

KseniaValeria
Shopify Partner
10 0 2

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
Shopify Partner
45 4 16

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

KseniaValeria
Shopify Partner
10 0 2
suyash1
Shopify Partner
9137 1137 1485

@KseniaValeria - 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

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
KseniaValeria
Shopify Partner
10 0 2

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
Shopify Partner
9137 1137 1485

@KseniaValeria - 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;}

 

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
KseniaValeria
Shopify Partner
10 0 2

Thank you so much! It works perfectly!

suyash1
Shopify Partner
9137 1137 1485

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

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
ShopCom
Tourist
4 0 1

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
Excursionist
29 1 5

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 

 

Screenshot (139).jpg