Hi!
I am looking for a code to arrange the footer content on my website www.aurabyangelo.com (Publisher theme) - I am open to either options below!
Option #1 - Center all footer content.
Image (Logo)
Footer Menu (links in one row not stacked in a column)
Email sign up (Newsletter)
Brand information - Social Media (Icons in one row)
Option #2 - Left side / Right side.
Left side:
Image (LOGO)
Right Side:
Email sign up (Newsletter)
Footer menu (links)
Social media (icons)
Thank you!!
-A
Hi @kritikozzz ,
I coluld only do this much from CSS. For complete redesign, this will require more time and access to the store so that i can rearrange the blocks as per my need.
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
Result:
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
I am interested in you redesigning the footer blocks… how do we go about that?
You can reach me out via email
Hi @kritikozzz
I try Option 1.
Check it out.
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
flex-direction: column;
align-items: center;
row-gap: 1rem;
}
#shopify-section-sections--21269279899933__footer > footer > div.footer__content-top.page-width > div.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in > div.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in > ul > li:nth-child(1) {
margin: 0px !important;
}
.footer-block.grid__item.scroll-trigger.animate--slide-in {
text-align: center;
}
.footer-block__image-wrapper {
margin: auto;
}
.footer-block--newsletter.scroll-trigger.animate--slide-in {
flex-direction: column-reverse;
align-items: center;
}
.footer-block__newsletter:not(:only-child) {
text-align: center;
margin-right: 0px;
}
Thank you - I am noticing the menu links on mobile do not align center (they are aligned to the left)
Also, the social media icons were not aligned on desktop.
Yeah, because while im editing it the design of your footer move a lot. So I stop editing. Im planning to get the option 2 but when I refresh it the logo gone. 
I am liking where it is currently at… - is it possible to make the menu links on ONE row, not stacked on top of each other? Also need to find a way for social media icons to be added in one row without getting stacked or off center.
Can you put it back the social media, so I can edit. Thanks!
Added. thank you in advance
Check this one. For the center,
.footer-block__newsletter:not(:only-child) {
text-align: center;
margin: auto;
}
ul.footer-block__details-content.list-unstyled {
display: inline-flex;
align-items: baseline;
column-gap: 40px;
margin: 0px;
}
And Save.
Can you please remove this code. in the image. Thanks!
Let me try.
Social media icons are now aligned to the right and the newsletter is off to the left
Add this one.
.footer-block--newsletter.scroll-trigger.animate--slide-in {
flex-direction: column-reverse;
align-items: center;
}
And Save.
On mobile its looking good, however, I wish some of the spacing between content was tighter… ? Possible to fix the large gaps?
On desktop however it still looks off and not centered.
