Can someone please help me center the social media icon in its block (this social media is in a brand information block not the check marked show social icons in the footer) on desktop and mobile? You can see in the pictures where I want it.
I would also like to reduce the spacing on the mobile footer. I was able to reduce the spacing on the desktop footer from code in another post I found, but the mobile footer spacing is still excessive. Below is all the code I have in the Custom CSS area for the Footer:
{
text-align: center;
}
.footer__content-bottom.scroll-trigger.animate--slide-in {
padding-top: 0px !important;
}
.footer__content-top {
padding-bottom: 2rem !important;
}
My website is ff804e-2.myshopify.com. Password is aubowb.
Hello @crystalbk
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
.footer-block__brand-info .footer__list-social.list-social {
justify-content: center !important;
}
Desktop:
Mobile
1 Like
Thanks! That centered the Facebook icon. Do you happen to know how to reduce the spacing in the circled areas, so the icon and text blocks are closer together?
Hello @crystalbk
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
@media screen and (ma-width:767px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
margin-bottom: 0 !important;
}
#shopify-section-sections--21880748736826__footer .footer__content-top {
padding-bottom: unset !important;
}
.footer-block.grid__item {
margin: 1rem 0;
}
.footer-block__details-content {
margin-bottom: 1rem;
}
.footer__content-bottom-wrapper.page-width {
display: none;
}
}
Hello @niraj_patel
This isn’t working for me. Below is how I pasted the code in the theme.liquid file and what the mobile view looks like after saving it. Do you know what I’m doing wrong? I’m not a code expert by any means.
Hello @crystalbk
I did mistake in write, sorry for that
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
@media screen and (max-width:767px){
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
margin-bottom: 0 !important;
}
#shopify-section-sections--21880748736826__footer .footer__content-top {
padding-bottom: unset !important;
}
.footer-block.grid__item {
margin: 1rem 0;
}
.footer-block__details-content {
margin-bottom: 1rem;
}
.footer__content-bottom-wrapper.page-width {
display: none;
}
}
1 Like
Thank you @niraj_patel ! That worked. Thanks again for all your help!
Hi, jumping on this, how do i change the padding for the blocks in desktop to reduce the spacing between blocks? I have two menus and they are too far apart for me.
