Is there a custom CSS that I can apply directly to the page section on the product template to make the section wider? Everything else on the page has a width of 1200px. I have used custom CSS’s to make other elements this wider. For instance, I have applied the following code to make “Rich Text” elements wider on product templates, but I can’t figure out how to do it for Page sections on the same product templates. Currently page sections on my product template are about 730px wide, which is so narrow. I am using the latest version of Dawn theme.
Here are screenshots of what I am talking about. I included a multicolumn above in the screenshot so you can see what the width of the rest of the page is, and then the page section is below, which is extremely narrow.
Here is the Rich Text Code that has worked for me:
@mitchfozz ,try this one
@media screen and (min-width: 990px) {
.page-width--narrow {
max-width: 1200px!important;
}
}
RESULT:
Unfortunately, getting this error 
In customize you can use media query css please try this one
.page-width--narrow {
max-width: 1200px!important;
}
Or you can follow these steps
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file theme.liquid.
Step 3. Add this code above
What do you mean in customize I can use media query css? How do I do this?
1 Like
did you try this one ?
.page-width--narrow {
max-width: 1200px!important;
}
This one certainly worked in a sense, but it got rid of any padding rules so if the screen was smaller than 1200px, there was no padding at all on the sides. In a perfect world too, I would like to apply this just to the page section on my product templates.
So try this one to add the padding
1 Like
That looks great in parts now! Still a few small issues issues. The pages are no longer responding to top and bottom padding as you can see in the screenshot below. Is there a way to fix this? Is there a way to apply this as a custom CSS so I don’t make global changes or no? Thank you for all your help!
I realized that I could apply this code to a page html directly, which would then transfer over to the page section on a template. So that’s a good workaround. If you know of a Custom CSS that I could apply directly to the page section on a template, please let me know. But this will do in the mean time. Thank you so much for your help!!
1 Like
Hey Sangee! While this did help give width to the page, it also messed with the width and padding of many other elements on my website. I think I figured out a solution though. Thank you so much for taking the time. I really do appreciate it!
