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

Jessicax · ‎03-14-2024

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

Can someone please assist?

ThePrimeWeb · ‎03-17-2024

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.

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

ThePrimeWeb · ‎03-14-2024

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 · ‎03-17-2024

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

ThePrimeWeb · ‎03-17-2024

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.

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 · ‎08-12-2024

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 · ‎03-14-2024

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 · ‎03-17-2024

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

Vinsinfo · ‎03-16-2024

@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 · ‎03-18-2024

@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;
}

4. Save.

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

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

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

☕Buy me a coffee☕

☕Buy me a coffee☕

☕Buy me a coffee☕

Community Blog Articles