Re: Footer issue mobile view

Solved

How can I fix the footer issue on mobile view?

aliceinclothing
New Member
4 0 0

Hello everybody,

I’ve been having a issue with the website footer (mobile view).In Mobile View, the footer text way at the bottom of the page is totally flush to the left. I’ve tried so many times, edited with so many codes, and I still can’t centralize it and remove the spacing. I’m going to provide a screenshot below.

 

If anyone can help I will really appreciate it.

 

 

 

BBA4A154-0312-4A3D-A461-09943AEB9625.jpeg

Accepted Solution (1)

GemPages
Shopify Partner
5624 1261 1230

This is an accepted solution.

Hello @aliceinclothing 

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1670034899327.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1670034922306.png

<style>
@media (max-width: 767px ) {
.footer-block__heading {
    margin-bottom: 1rem !important;
    text-align: center;
}
.footer-block__details-content .list-menu__item--link {
    padding: 0px!important;
}
.footer-block__details-content > li {
    display: flex;
    justify-content: center;
}
.footer-block__details-content {
    margin-bottom: 2rem !important;
}
.footer-block.grid__item {
    margin: 2rem 0 !important;
}
.footer-block--newsletter {
    margin-top: 2rem !important;
}
.footer-block__newsletter + .footer__list-social {
    margin-top: 2rem !important;
}
.footer__content-top {
    padding-bottom: 1rem !important;
}
}
</style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 7 (7)

EcomRAZ
Shopify Partner
85 6 6

Hi Aliceinclothing,

 Use the media query CSS and make sure you are applying to right class of footer menu. Also, Don't look into theme settings first. There might be option for that. 

Shopify Store Developer || Certified Shopify Partner || Liquid and JavaScript || Figma/XD to Shopify || Shopify Plus || Shopify Speed Optimization
- If you find our reply helpful, please hit Like and Mark as a Solution || Book a Free Call NOW: ecom.raz23@gmail.com || Whatsapp: +923166892449

GemPages
Shopify Partner
5624 1261 1230

Hello @aliceinclothing 

Can you give me your Store URL so I can check it for you?

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
aliceinclothing
New Member
4 0 0

Yes! Thank you so much.

This is my url: https://aliceinclothingland.com/

pass: hello1998

Raunyt-vbm
New Member
9 0 0

Hello,

 

The footer is not the only issue, there are sever other issues which I have detected in the website. However if you want you can reach me on raunyt.vbm@gmail.com and I can fix it for you right away.

 

Would be glad to help.

Thank you!

Available for hire, $5 only
Click here to contact me.
Five only as I am here for social work and to help others. Working for charity of children educations as main stream. 24x7 available for any urgent issues.

GemPages
Shopify Partner
5624 1261 1230

This is an accepted solution.

Hello @aliceinclothing 

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1670034899327.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1670034922306.png

<style>
@media (max-width: 767px ) {
.footer-block__heading {
    margin-bottom: 1rem !important;
    text-align: center;
}
.footer-block__details-content .list-menu__item--link {
    padding: 0px!important;
}
.footer-block__details-content > li {
    display: flex;
    justify-content: center;
}
.footer-block__details-content {
    margin-bottom: 2rem !important;
}
.footer-block.grid__item {
    margin: 2rem 0 !important;
}
.footer-block--newsletter {
    margin-top: 2rem !important;
}
.footer-block__newsletter + .footer__list-social {
    margin-top: 2rem !important;
}
.footer__content-top {
    padding-bottom: 1rem !important;
}
}
</style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
aliceinclothing
New Member
4 0 0

It worked! Thank you so much 🙂 

GemPages
Shopify Partner
5624 1261 1230

Hello @aliceinclothing 

It's my pleasure to help.

Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center