Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
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!
Yeah, the Page text width is really narrow on Dawn. However, I entered that in the base.css file and it didn't work.
Are we looking to same section right?
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!
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.
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!
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.
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!
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).
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!
Thanks! It's still about the same width in mobile (just a bit wider)...what would I do to make it wider?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024