Change Newsletter Form position in Footer Menu mobile version

Store Design
, ,

Topic summary

A user needed help centering the newsletter form in their footer on mobile devices while keeping it left-aligned on desktop.

Initial Solution:

  • A CSS code snippet was provided targeting .footer-block__details-content with flexbox properties
  • Code was to be added to theme.liquid file before the </body> tag

Problem Encountered:

  • The initial code caused unintended side effects: product images disappeared from product pages and collection images were also affected
  • User confirmed the issue occurred specifically after implementing the footer code

Final Resolution:

  • A more specific CSS solution was provided using targeted Shopify section IDs (#shopify-section-sections--22981104140630__footer)
  • This scoped approach prevented conflicts with other page elements
  • The refined code successfully centered the mobile newsletter form without affecting product/collection images

Key Takeaway: Using more specific CSS selectors (section IDs) instead of broad class selectors prevented styling conflicts across the site.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
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