How to change the width of a page in Dawn Theme created by AI

[qaxperts007]

Hi there

I created an FAQ’s page in Dawn Theme using AI Generator. This page’s contents is significantly wider than my default page contents. There is no change when I go to Layout and change the Page width (currently set at 1200) in the Theme Editor. Is there a way to fix this so they are the same. Personally I feel the FAQ’s is far too wide and the default page too narrow. So somewhere in the middle would be perfect.

Many thanks for your expert assistance.

[Dan-From-Ryviu]

You can add this code to Custom CSS of the theme settings.

#shopify-section-template--20794682573019__176282647963cf43b5 { max-width: 600px; margin: 0 auto; }

[tim_tairli]

You can ask AI to generate the code again and ask it to make sections respect the standard theme width of the theme. You can fine-tune AI generated section until you click “Save”…

But for this one:

You can add this code either to “Theme Settings”(cog icon)=>Custom CSS or “Custom CSS” of this section.
FAQ accordions will follow the same rule other “page width” sections conform to.
(This is controlled by the “page width” setting in Theme Settings)

[class^=ai-faq-container] {
  max-width: var(--page-width);
  padding: 0 1.5rem;
  display: block;
}

@media (min-width:750px) {
  [class^=ai-faq-container] {
    padding: 0 5rem;
  }
}

[websensepro]

Hello, @qaxperts007

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media (min-width: 768px){
div#shopify-section-template--20794682573019__176282647963cf43b5
Specificity: (1,0,1)
 {
    padding: 0 30rem !important;
}
 }

You can adjust the 30rem value according to your preference.

If this code works, please mark my comment as the solution!

Thank You!