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
A user seeks help adjusting footer layout in the Shopify Refresh theme, specifically wanting to:
Primary Issues:
Solution Provided:
A responder shared CSS code to add to the base.css file, including:
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.
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 @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
Thank you so much. It works.