How can I increase the width of my Dawn theme newsletter section?

Store Design
,
1

Hi all,

I am trying to increase the width of the my newsletter section which sits outside the footer.

I have checked the css and tried many things but with no effect.

Any suggestion?

2

Hello @MaBa ,
Please share your website URL.

3

Hey @MaBa .

Thanks for reaching out.

I appreciate that you have included the name of the theme you are using as that is very helpful! Looking into the Dawn theme, I noticed that changing the width of the newsletter section is not available using the Theme Editor. However, it is possible to make a change of coding to have the section displayed as you would like. Since the Dawn theme is designed and supported by Shopify, we can use free design time for Shopify themes to have our internal team make the changes on your behalf.

08-19-75152-72901
08-19-75152-729011920×920 192 KB

If you are interested in using design time, you will need to login to your store using the Contact Us page. This will allow us to securely verify you as the store owner.

Once you successfully login, you will be directed to the Help Center. Select that topic that you would like assistance with to locate the options to Get Support and speak with a Support Advisor about the situation.

Let me know if you have any questions.

4

womanly.se

5

@MaBa

Add this code at the bottom assets > base.css file

@media screen and (min-width: 750px) {
	  .newsletter-form {
	  		max-width: 100%;
	  }
	  .newsletter__wrapper .newsletter-form__field-wrapper {
		max-width: 69rem;
    	margin: 0 auto;
	  }
}

Try it and let me know

6

No changes unfortunately…

7

Hi @MaBa
have you removed the newsletter element?
I didn’t see it on the footer.

8

the newsletter section is it is not in the footer, it is in the page

9

Hello @MaBa ,
please share page link.

10

www.womanly.se

11

Hi @MaBa
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

@media screen and (min-width: 750px){
.newsletter-form {
  margin: 0 auto;
/*change the number bel;ow to the size you want*/
  max-width: 100%!important;
}
.newsletter__wrapper .newsletter-form__field-wrapper {
  max-width: 100%!important;
}
}
12

It works!

Thanks a lot :slightly_smiling_face: