Move newsletter section to the left in footer

Store Design
, , , , ,

Topic summary

Main issue: Adjust footer so the newsletter signup sits further left and spacing between “Client Service,” “The Company,” and “Newsletter” is equal.

What happened:

  • Advised to adjust CSS (margins/padding). A helper provided instructions to add custom code in theme.liquid (above ). Multiple attempts were made; after re-adding and saving, the requester confirmed success (“Thank you!!”). Outcome: footer spacing/positioning appears resolved.

New follow-up: Limit header icons’ clickable area to only when hovering over the icons, including the menu icon.

  • Existing CSS successfully constrained three icons, but the menu icon still has extra clickable space on its sides.
  • The helper said the code worked for all four icons per their test (screenshot), but the requester still experienced the issue.
  • Additional CSS edits were suggested twice; the problem persisted after the first; a final code attempt was provided.

Notes:

  • Screenshots and CSS snippets are central to the troubleshooting (specific code content not visible in this extract).

Status:

  • Footer alignment: resolved.
  • Menu icon clickable area: unresolved/ongoing, awaiting confirmation after the latest CSS change.
Summarized with AI on December 28. AI used: gpt-5.
1

Hi guys,

Website: seraneeva.com

How can I move the newsletter signup section more to the left in the footer and make it so that the three sections (client service, the company, and newsletter) have the same padding between them. Pic attached for what I’m looking for.

Screenshot 2024-05-29 at 4.24.32 PM.png
Screenshot 2024-05-29 at 4.24.32 PM.png2818×934 146 KB

2

Achieve this, you’ll need to edit the CSS styles of your footer elements. Specifically, adjust the margins or padding of the newsletter signup section to move it more to the left, and ensure consistent padding between the three sections.

3

This is Noah from PageFly - Shopify Page Builder App

Hi @flammagreg Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

4

That didn’t work. Anything else?

Screenshot 2024-05-29 at 11.09.54 PM.png
Screenshot 2024-05-29 at 11.09.54 PM.png2092×994 84.4 KB

1 Like
5

Hi , Please add again code here:

And it still issue , Can you save the code so I can check it again? In the past, many cases used this method. If it’s wrong, I need to check again.
Thank you.

6

I did it again and it showed up the same. I left the code

1 Like
7

Thank you please add again code here:
1 Like
8

Thank you!!

9

Thank you ! Have a nice day :wink: !

1 Like
10

One more question for. I added code to make the icons in the header only be able to be clickable when a user is actually hovering over them. It worked all icons, but the menu icon. Do you know how to do this for the menu icon too?? I’m thinking I just need to add something that addresses the menu icon to the code below, but I’m not sure what that is.

Code that worked for the other 3 icons:

.site-header .site-header__wrapper .site-header__wrapper__right > ul > li >a, .site-header .site-header__wrapper .site-header__wrapper__right > ul > li >button { padding: 0 !important; min-width: fit-content; margin: 0 9.23px; }
11

Oke, Let me check !

1 Like
12

Hi, I have check this code have worked for 4 icon, You can see image here:

PageFlyNoah_0-1717041313084.png
PageFlyNoah_0-1717041313084.png3342×1976 951 KB

13

Do you know why it doesn’t work? When hovering menu as opposed to the other icons, there is definitely space on the left and right of the icon that is clickable.

14

You can try edit code here:
15

Still the same

16

Oke, Please add code here, I think it will fix it:

Thank you.

1 Like