Solved

How to align Email Signup to the left (Dawn Theme)

Jessicax
New Member
6 0 0

I'm having trouble aligning all of the content of my email signup section to the left with CSS.

Can someone please assist?

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1857 523 401

This is an accepted solution.

Hey @Jessicax,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
.newsletter__wrapper {
  max-width: var(--page-width) !important;
  margin: auto !important;
  text-align: left !important;
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}
.newsletter__subheading {
  max-width: none !important;
}
.newsletter-form {
  justify-content: flex-start !important;
  max-width: none !important;
  align-items: flex-start !important;
}

@media only screen and (max-width: 989px) {
  .newsletter__wrapper {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710727451708.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 7 (7)

ThePrimeWeb
Shopify Partner
1857 523 401

Hey @Jessicax,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Jessicax
New Member
6 0 0

My store: https://capcovers.myshopify.com
Password: theirt

ThePrimeWeb
Shopify Partner
1857 523 401

This is an accepted solution.

Hey @Jessicax,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
.newsletter__wrapper {
  max-width: var(--page-width) !important;
  margin: auto !important;
  text-align: left !important;
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}
.newsletter__subheading {
  max-width: none !important;
}
.newsletter-form {
  justify-content: flex-start !important;
  max-width: none !important;
  align-items: flex-start !important;
}

@media only screen and (max-width: 989px) {
  .newsletter__wrapper {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710727451708.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

techlyser_web
Shopify Partner
1423 268 282

Hello @Jessicax 

Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Jessicax
New Member
6 0 0

My store is: https://capcovers.myshopify.com
The Password is: theirt

Vinsinfo
Shopify Partner
191 63 60

@Jessicax Please share your store URL to help you on this.

Vinsinfo
Shopify Partner
191 63 60

@JessicaxPlease follow below steps for aligning all of the content of my email signup section to the left in footer section.

 
1. From admin, go to "Online Store" -> "Themes".
2. Click "Customize" button from the current theme.
3. Select footer section and paste below code in the "Custom CSS" field as shown in below image.

 

.newsletter__wrapper {
    text-align: left;
}
.newsletter__subheading {
    margin-left: 0;
    margin-right: 0;
}
.newsletter-form {
    margin-left: 0;
    margin-right: 0;
    flex-direction: row;
    justify-content: left;
}

 

Vinsinfo_0-1710777341012.png

4. Save.

Vinsinfo_1-1710777418792.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.