How to adjust width of contact form section on Dawn theme?

Store Design
,

Topic summary

A user needed to adjust the width of a contact form on product pages in the Dawn theme. Their existing CSS code (.page-width { max-width: 1500px !important; }) was affecting all sections with that class, not just the contact form.

Solutions provided:

  • Option 1: Add .contact.page-width { max-width: 85rem !important; } to the theme’s CSS file (base.css, style.css, or theme.css) to target only the contact section

  • Option 2: Use .contact.page-width:has(form#ContactForm) { max-width: 1000px !important; } in the Custom CSS section via Theme Settings

Resolution: The second solution successfully resolved the issue. The key was using more specific CSS selectors to target only the contact form section rather than all elements with the .page-width class.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi,

We’re trying to adjust the width of the contact form on our product pages. See example:

https://cascadeironco.com/collections/shelf-brackets

cascadeironco_0-1736453049649.png
cascadeironco_0-1736453049649.png1920×1080 232 KB

cascadeironco_1-1736453050635.png
cascadeironco_1-1736453050635.png1920×1080 232 KB

We use Dawn theme and have custom CSS which applied to another section so I’m not sure why it’s not applying to the contact form (or perhaps it changed it?)

.page-width {
max-width: 1500px !important;
}

Thanks in advance!

1 Like
2

Hi @cascadeironco

When you add this code, all sections with the .page-width class will be affected. If you want to target only a specific section, you should specify that section to avoid affecting others.

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.contact.page-width {
    max-width: 85rem !important;
}

Note: this is the original size of the contact section before you add the 1500px.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
3

Hi @cascadeironco

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.contact.page-width:has(form#ContactForm) {
    max-width: 1000px !important;
}

image (58).png
image (58).png1847×778 44.2 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
4

This worked, thank you so much!!

5

Hi @cascadeironco

Thank you for your confirmation :heart: