Change Newsletter Form position in Footer Menu mobile version

Store Design
, ,
1

Hi,

Can someone help me please with the next case? I did some research and tried some offered solutions, but none of them worked for me.

I want to centre the Newsletter Form at the footer on the mobile version. On the desktop version it’s placed on the left and that’s fine. But the mobile version is ugly.

IMG_3156.PNG
IMG_3156.PNG1170×2532 188 KB

And i want it like this:

Captura de pantalla 2023-11-14 225333.png
Captura de pantalla 2023-11-14 225333.png503×648 9.53 KB

This is my webshop: https://asam-e.com/.

Can someone please help me?

2

Hello @BettoM14

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .footer-block__details-content { display: flex !important; flex-direction: column; justify-content: center; align-items: center; } .footer-block.grid__item { margin: unset !important; } .footer__blocks-wrapper { width: 100% !important; } .grid--1-col .grid__item { max-width: 100% !important; width: 100%; display: flex !important; justify-content: center; align-items: center; flex-direction: column; } .footer-block--newsletter { width: 100% !important; margin-top: unset !important; } }

techlyser_web_1-1722090127681.png
techlyser_web_1-1722090127681.png374×509 6.28 KB

techlyser_web_0-1722090103252.png
techlyser_web_0-1722090103252.png371×509 7.67 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
3

Thank you very much!

1 Like
4

Hi @niraj_patel

I marked it as solution, but it gave me troubles viewing my product pictures on the product page. It was like this:

IMG_3158.PNG
IMG_3158.PNG1170×2532 280 KB

IMG_3159.PNG
IMG_3159.PNG1170×2532 224 KB

And the picture of a other collection dissapeared as well. Do you maybe have an other solution?

5

But I only gave you the footer adjustment code which was not related to any collection, maybe it is happening due to some other code.

6

Nope, just tested it again and the same problem came forward. Is it maybe because it is in combination with another code?

This also happend because i used your code:

BettoM14_1-1722183179642.png
BettoM14_1-1722183179642.png381×565 9.99 KB

7

Replace code with this

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { #shopify-section-sections--22981104140630__footer .footer-block__details-content { display: flex; flex-direction: column; justify-content: center; align-items: center; } #shopify-section-sections--22981104140630__footer .footer-block.grid__item { margin: unset !important; } #shopify-section-sections--22981104140630__footer .footer__blocks-wrapper { width: 100% !important; } #shopify-section-sections--22981104140630__footer .grid--1-col .grid__item { max-width: 100%; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } #shopify-section-sections--22981104140630__footer .footer-block--newsletter { width: 100% !important; margin-top: unset !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
8

Yes, this is the one. Thanks again! :slightly_smiling_face:

1 Like