Dawn 15 Theme: Change text width in Page?

Dawn 15 Theme: Change text width in Page?

ryanb819z
Tourist
24 0 1

Hey all...just wondering if someone might have some CSS I can add to the Dawn 15 theme to make the text area of pages wider. It's ridiculously narrow. Image attached. Thanks!

 

page-width.jpg

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
8775 2099 2574

Hi @ryanb819z 

chek this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

 

.page-width.page-width--narrow.section-template--21533773922616__main-padding {
    max-width: 100%;
    padding: 0 5rem;
}

 

And save. 

Only this section? 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ryanb819z
Tourist
24 0 1

Yeah, the Page text width is really narrow on Dawn. However, I entered that in the base.css file and it didn't work.

Made4uo-Ribe
Shopify Partner
8775 2099 2574

Are we looking to same section right? 

Screenshot 2024-10-04 210254.png

If not on the base.css then add on the theme.liquid. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
.page-width.page-width--narrow.section-template--21533773922616__main-padding {
    max-width: 100%;
    padding: 0 5rem;
}
</style>

 

And Save. 

Let me know if it different store, and please provide the store URL. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ryanb819z
Tourist
24 0 1

You're not looking at the correct theme, but yeah, same site. I'm working on Dawn and it's not active. I just tried it in the theme.liquid file and that didn't work either. I've triple-checked my work and that I'm in the correct theme as well haha.

Made4uo-Ribe
Shopify Partner
8775 2099 2574

It won't work if it's not the same theme. I can provide another code, but it might affect another section as well. You can share the preview if its not live yet. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ryanb819z
Tourist
24 0 1

I'm not sure what you mean. I specifically asked about my inactive Dawn theme. You posted a screenshot of Taste...and I don't need to do it on that one. I tried it both ways for the Dawn theme and it didn't work.

Made4uo-Ribe
Shopify Partner
8775 2099 2574

chec this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

 

.page-width.page-width--narrow.section-template--23467858198840__main-padding {
    max-width: 100%;
    padding: 0 5rem;
}

 

And Save. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ryanb819z
Tourist
24 0 1

Hey! That did work - I set it at 60% - but it's always kept at that percentage now, even if the browser window is smaller. Is there a min and max or something where it doesn't stay at that percentage if the browser window is small?

 

Also, it got rid of my top padding. No idea why it did that, but I can no longer adjust the top padding and it's now 0 instead of 24px (where I have it set at).

Made4uo-Ribe
Shopify Partner
8775 2099 2574

Oh, I know what you mean the default code have max-width; 72.6rem for higher that 989px screen size. 

Check this one, this will apply for whole section with the narrow sizes. 

 

<style>
.page-width--narrow {
        max-width: 100%;
        padding: 5rem;
    }
</style>

 

And Save. 

But, this padding will make more spaces on the screen sizes. 

Add this one for mobile. 

 

@media only screen and (max-width: 749px){
     .page-width--narrow {
         padding: 3rem;
}
}

 

And save. 

You can also adjust the size. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ryanb819z
Tourist
24 0 1

Thanks! It's still about the same width in mobile (just a bit wider)...what would I do to make it wider?