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

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
2138 616 502

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? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2138 616 502

Hey @Jessicax,

 

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

Was I helpful?

Buy me a coffee

🙂

Need help with your store? [email protected] 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
2138 616 502

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? [email protected] or check out the website
Check out our interview with Shopify!
steventrimble
Visitor
1 0 0

Hello,

Just ran across this solution and it works great - but it makes my background not full width.

For reference my store is bombsupply.com - what would I need to add or modify to make the background color full width but keep the text where it is?

niraj_patel
Shopify Partner
2378 514 512

Hello @Jessicax 

Can you share store URL?

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- [email protected]
Jessicax
New Member
6 0 0

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

Vinsinfo
Shopify Partner
427 143 143

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

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
Vinsinfo
Shopify Partner
427 143 143

@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.

 

Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support