Solved

How can I center my newsletter subscription form on both desktop and mobile?

TBS2022
Trailblazer
243 2 36

Hello

I would like to have my Newsletter subscription form centered on desktop and i would like it to remain an open tab on mobile version and centered.

Thanks

I am using Impulse theme

https://39e9ca.myshopify.com/

riacia

 

Thanks

 

TBS2022_0-1696424019791.png

 

 

Accepted Solution (1)
syedsumaimaly
Trailblazer
147 16 21

This is an accepted solution.

Hi @TBS2022 & please marked the previous solutions as well.

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above </body> tag

{% style %}
form#newsletter-footer {
    width: 95%;
}

.grid__item.footer__item--1494292487693 {
    text-align: center;
    width: 100%;
}
{% endstyle %}

syedsumaimaly_0-1696489877322.png

If I managed to help you then, don't forget to Like it and Mark it as Solutions

 

View solution in original post

Replies 14 (14)

syedsumaimaly
Trailblazer
147 16 21

Hi @TBS2022 

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above </body> tag

.footer__newsletter {
    text-align: center;
}

RESULT:

syedsumaimaly_0-1696424256691.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

TBS2022
Trailblazer
243 2 36

nope - didnt work

syedsumaimaly
Trailblazer
147 16 21

@TBS2022 can you share screen shot where yo paste the code?

 

TBS2022
Trailblazer
243 2 36

TBS2022_0-1696425001338.png

 

syedsumaimaly
Trailblazer
147 16 21

@TBS2022  Try this

.footer__newsletter {
    text-align: center !important;
}
TBS2022
Trailblazer
243 2 36

still nothing

syedsumaimaly
Trailblazer
147 16 21

@TBS2022 Paste this code in theme.liquid file

{% style %}
.footer__newsletter {
    text-align: center !important;
}
{% endstyle %}

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

TBS2022
Trailblazer
243 2 36

that worked in mobile but not on desktop

syedsumaimaly
Trailblazer
147 16 21

@TBS2022  Paste this code in theme.liquid 

 

{% style %}
form#newsletter-footer {
    text-align: center;
}
{% endstyle %}

 

syedsumaimaly_0-1696426605346.png

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

TBS2022
Trailblazer
243 2 36

TBS2022_0-1696427659258.png

 

how can i get the rest of the text to move as well?

syedsumaimaly
Trailblazer
147 16 21

@TBS2022 Copy and paste this code. and please marked all the solutions as well.

 

 

{% style %}
.grid__item.footer__item--1494292487693 {
    text-align: center;
width: 100%;
}
{% endstyle %}

 

 

syedsumaimaly_1-1696428254631.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

 

TBS2022
Trailblazer
243 2 36

thank you - but why is not 100% centered - its all left and right.

could it be a padding issue?

TBS2022_0-1696478603018.png

TBS2022_1-1696478655802.png

 

 

TBS2022
Trailblazer
243 2 36

could we have it like this

TBS2022_2-1696478889900.png

 

syedsumaimaly
Trailblazer
147 16 21

This is an accepted solution.

Hi @TBS2022 & please marked the previous solutions as well.

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above </body> tag

{% style %}
form#newsletter-footer {
    width: 95%;
}

.grid__item.footer__item--1494292487693 {
    text-align: center;
    width: 100%;
}
{% endstyle %}

syedsumaimaly_0-1696489877322.png

If I managed to help you then, don't forget to Like it and Mark it as Solutions