How can I move email signup and adjust block spacing in Refresh Theme?

Topic summary

A user seeks help adjusting footer layout in the Shopify Refresh theme, specifically wanting to:

Primary Issues:

  • Move the email signup block to align with left menu links
  • Reduce spacing between footer blocks
  • Decrease top margin of email signup on mobile view

Solution Provided:
A responder shared CSS code to add to the base.css file, including:

  • Text alignment adjustments for footer headings
  • Flexbox layout modifications for footer content
  • Media queries for responsive tablet/mobile views
  • Margin and gap customizations

Outcome:
The initial CSS solution successfully resolved the desktop layout issues. The user confirmed it works but followed up with an additional question about mobile spacing, which remains unanswered. Screenshots were shared showing the before state and desired alignment.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.

Hi there,

Can anyone please adivse how to move the email signup to the right block and align with left menu links? Also how can I make the space between blocks smaller? Thank you.

example:

Best regards,

Tara

Hey @Tara123

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

Hi Moeed,

Thanks for your kind response. My website: veepli.com, PW: owcrjj

Best Regards,

Hi @Tara123 ,

You can edit the CSS to customize the footer on your website. Add the following code at the end of your base.css file:

h2.footer-block__heading.inline-richtext {
text-align: start !important;
}
.footer-block–newsletter.scroll-trigger.animate–slide-in {
margin-top: 0px !important;
}

.footer__content-top.page-width {
display: flex;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
}

@media only screen and (min-width: 750px) {

.footer-block–newsletter.scroll-trigger.animate–slide-in {
flex: 1;
}
.footer__blocks-wrapper.grid.grid–1-col.grid–2-col.grid–4-col-tablet.scroll-trigger.animate–slide-in {
flex: 2;
}
}
→ Result after adding:

Hope it helps @Tara123

1 Like

Thank you so much. It works.

A further question, for mobile view, how can I decrease the top margin of email signup block to the same as the other blocks? The space looks large. Thank you.