Issue: Footer needed customization so the email newsletter appears first and aligns on the same row with quick links, matching a provided visual example. The store URL was shared for context.
Solution provided: Add custom CSS in Shopify (Online Store > Customize > Theme settings > Custom CSS). The CSS uses a media query (min-width: 768px) to set the footer container to display: flex with row-reverse so the email block appears first, and adjusts the newsletter block layout (column direction, right padding, no top margin) to align elements neatly on desktop.
Outcome: The changes achieved the desired alignment; the requester confirmed the fix worked. No further issues reported.
Notes: Images were central to illustrate the current and desired footer layouts. The solution targets desktop screens; behavior on smaller screens was not modified in this thread.
Can please someone help me customize my footer it currently looks like this-
I want it ideally to be looking like this-
Also email should be the first thing that shows up just like the above example. Just so that the email and all the quick links are on the same line and the email box arrow has a round button under it, any help would be highly appreciated.
Hi @Motoblox
I hope you are well. You can follow our instructions below:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there
Here is the code for Step 3:
@media screen and (min-width: 768px){
.footer__content-top.page-width {
display: flex !important;
flex-direction: row-reverse !important;
}
.footer-block--newsletter {
flex-direction: column !important;
padding-right: 20px !important;
margin-top: 0 !important;
}
}
Please let me know if it works. Thank you!
Best,
Daisy - Avada Support Team.
That is perfect thank you so much
