Newsletter Section on all pages - left margin

Store Design
1

Hi,

I hope someone can help me. The newsletter section of my theme I use on many pages. The issue I have is on desktop the left text is too close to the edge. Can I add a margin here that will change it all on all pages? The ideal result is the Email enter part and the text are perfectly centered.

Matthew_Hills_0-1707456292938.png
Matthew_Hills_0-1707456292938.png2684×832 208 KB

Thanks a million!

2

Hey @Matthew_Hills

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi Moeed,

Thank you, yes it is www.riehlbeer.de

Best regards,

Matt

4

Hey @Matthew_Hills

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1707457895919.png
Moeed_0-1707457895919.png1884×862 194 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hi Moeed, that is perfect thank you! Is it possible to do a similar thing for mobile? So there is a margin on both sides of the text?

IMG_642B2E8F36D0-1.jpeg
IMG_642B2E8F36D0-1.jpeg1179×2556 193 KB

Best regards,

Matt

6

Hey @Matthew_Hills

Keep the previous code and add this new code with the same steps above in theme.liquid

@media screen and (max-width: 767px) {
.rte.text-link-animated p {
    margin-left: 20px;
    margin-right: 20px;
}
}

RESULT:

Moeed_0-1707458502511.png
Moeed_0-1707458502511.png256×550 85.7 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

7

Hi Moeed,

It did not work, I just have the code text showing at the bottom of the page. Did I do something wrong?

Best regards,

Matt

8

Hey @Matthew_Hills

Try this code

@media screen and (max-width: 767px) {
.rte.text-link-animated p {
    margin-left: 20px !important;
    margin-right: 20px !important;
}
}

If this, doesn’t works then show me a screenshot of how you added the code.

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

9

Perfect, thank you your a star!

10

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.