Left Align Sign Up

Store Design
, ,
1

Hi, I’ve used a piece of code to left align the text of my newsletter signup block on my footer, which looks fine on mobile, but on the desktop site it’s pushed it right over to the left side, and now looks silly on desktop version.

Is there a way to have it left aligned, but still in line with the rest of the content on my site, without affecting the left align on the mobile version?

Screenshot 2024-08-08 at 21.29.17.png
Screenshot 2024-08-08 at 21.29.17.png2446×1542 214 KB

1 Like
2

Hi @seandrx ,

first of all revert the changes you made, and the follow the below method

Here’s how you can adjust the alignment:1. Access Your Theme’s CSS:

  • In your Shopify admin, go to Online Store > Themes.
  • Find the theme you’re using and click on Actions > Edit code.
  • Open the base.css or the corresponding CSS file where you added the custom styles.

  1. Add Responsive CSS:

    • At the bottom of the file, add the following CSS code:
/* Left-align the newsletter signup on mobile */ .footer__newsletter { text-align: left; margin-left: 0; } /* Center-align or adjust the margin for the newsletter signup on desktop */ @media (min-width: 768px) { .footer__newsletter { text-align: left; /* Keep it left-aligned */ max-width: 1200px; /* Adjust this width to match your content's container */ margin: 0 auto; /* Center it within the page */ padding-left: 15px; /* Adjust padding to match the rest of the content */ } }

  • Replace .footer__newsletter with the correct class or ID for your newsletter signup block if it’s different.

  • Save the Changes:

    • Click Save in the top right corner.

      please mark it as a solution if it resolves your issue. Thanks

3

Hi @seandrx

Would you mind to share your store URL? Thanks!

4

Sure, www.cerafusa.co.uk

Password is REDACTED

5

Hi, thanks for your solution, I’m afraid it hasn’t worked on this occassion.

I copied the code above and pasted in to the base.css and amended the relevant parts you’ve highlighted, but it hasn’t had any effect on the website.

6

Thanks for the info, check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

And Save.

Result:

Made4uoRibe_0-1723199573044.png
Made4uoRibe_0-1723199573044.png1857×588 27 KB

I also fix the mobile screen.

Made4uoRibe_1-1723199594587.png
Made4uoRibe_1-1723199594587.png675×520 16.7 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
7

That’s fixed it exactly as I needed!! Thank you so much.

8

Sorry it’s me again, how can I do a similar change on my password page? I can left align all other content other than the newsletter signup form.

9

Hi, can you align them on the left and ill align the newsletter or other that needs to align o nthe password page.