Align mobile footer and reduce space debut

Solved
Highlighted
New Member
5 0 0

Hey,

I would greatly appreciate if someone can help me align this to the center on mobile view, I tried playing with CSS but did not find any solution.

Align Footer.PNG

I am also trying to reduce the space here(on the bottom)

Reduce footer space.PNG

My store URL is: https://flopsarena.com/

 

Any help will be greatly appreciated!

 

Thanks

0 Likes
Highlighted

Hello @yairb,

Go to Online Store->Theme->Edit code->Asset->theme.scss.liquid->paste bellow code in bottom of file

@media only screen and (max-width:749px) {
.site-footer__item.site-footer__item--one-quarter { justify-content: center; }
}

To reduce space add below css

@media only screen and (max-width:749px) {
.site-footer__icon-list {
    padding-bottom: 10px;
}
footer.site-footer {
    padding-bottom: 15px;
}
.site-footer__hr {
    margin: 30px 0 30px 0;
}
}

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

Success.

Shopify Partner
1278 74 156

Dear yarib,

 

In theme -> Online Store -> Action -> Edit code ->

Go to the Assets -> open theme.scss.liquid

Then paste this code at the bottom of file

@media (max-width: 750px){
.site-footer__item{
    justify-content: center;
    text-align: center;
    margin-bottom: 38px;
}
.site-footer__item:nth-child(2){
    margin-bottom: 20px;
}
.site-footer .site-footer__icon-list {
    padding-bottom: 7px;
}
.site-footer {
    padding-bottom: 10px;
}
.site-footer .site-footer__hr {
    margin: 20px 0 20px 0;
}
}
Thanks & Regards
MS Web Designer
Setup Shopify Store @ 129 USD
20000+ Task Completed
1000+ Satisfied Client
9.9*/10 Customer Rating
10*/10 Shopify Services Marketplace
1 Like
Highlighted
New Member
5 0 0

Thank you it worked!

Last thing how do I reduce the space between each item in the list?
Thanks

 

0 Likes
Highlighted

Success.

@yairb,

Add below css

@media only screen and (max-width:749px) {
.site-footer__linklist-item {
    padding: 5px 0;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like