A user seeks help repositioning their footer’s newsletter subscription field to align horizontally with other menu items, specifically wanting it on the right side next to social icons.
Initial Issue:
Technical Challenge:
Proposed Solution:
A helper provided CSS code to be added to the theme’s stylesheet (base.css/style.css/theme.css):
display: flex and flex-direction: rowflex-grow: 1 to newsletter blockalign-items: baseline for vertical alignmentLatest Request:
User now asks to move subscription to the third column instead and add a small description text below the “Subscribe to our emails” title.
Status: Ongoing - awaiting further customization assistance.
Hello!
This is what my footer currently looks like. How can I move the subscription field on the same level as the other menu items? I would like the subscription field to be on the right side (next to the socials). My url: www.jimindraws.com
I’d like it to look something like this where the subscription is on the same row as the other elements.
Hi @jimindraws
Its password protected.
Hi I just removed my password.
Thanks!
@Made4uo-Ribe just removed my password!
Thanks for the info, i try to exchange the social icons and the newsletter but no luck at all. Why? The links together the social icons are on same container. The newsletter is on the different container but they have a parent that hold them together in whole container that is why I manage to align them. To exchange the social and newsletter you need to edit some of the liquid.
check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 749px){
.footer__content-top.page-width {
display: flex;
flex-direction: row;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
flex-grow: 1;
}
.footer-block--newsletter.scroll-trigger.animate--slide-in {
margin-top: 0px;
align-items: baseline;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Sorry, can you help me move the subscription on the third column? Also, is it possible to display a small description below the “subscribe to our emails” title like the screenshot below?
