Solved

Refresh Theme - Center & Stack Footer Menu On Mobile

shanagarryceo
Excursionist
52 0 4

Wondering if anyone knows how to stack the footer into two columns & center the content on mobile? It's currently left aligned and in one column as shown below.

 

shanagarryceo_0-1675710535187.png

 

Any help would be amazing! I've tried pasting some codes from other themes but it hasn't worked. Current theme is Refresh Theme.

 

 

Accepted Solution (1)
PageFly-Kate
Shopify Partner
1125 331 328

This is an accepted solution.

Hi @shanagarryceo ,

 

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .footer__content-top {
        padding-left: 20px;
        padding-right: 20px;
    }
    .footer .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 10px;
        text-align: center;
    }
    .footer-block.grid__item {
        margin-top: 0 !important;
    }
    .list-menu__item {
        justify-content: center;
    }
}

I hope it would help you
Best regards,

Kate | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 8 (8)

GemPages
Shopify Partner
5589 1261 1218

Hello @shanagarryceo ,

 

It's the GemPages Support Team and we are glad to assist you today!

 

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

 

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
shanagarryceo
Excursionist
52 0 4

Hi,

 

Thanks for the help, password is nietro

 

Store is here 

BSS-Commerce
Shopify Expert
3477 461 518

Hi @shanagarryceo 

Please follow these steps:

- Step 1: Open Theme => Edit code:

view - 2023-02-07T160030.133.png

- Step 2: Search file "base.css" or "theme.css" and add code at the end:

@media screen and (max-width: 749px){
.footer .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 1rem;
    text-align: center;
}
.grid > .footer-block.grid__item:not(.footer-block--menu) {
    grid-column: 1 / span 2;
}

}

and note that in some parts you need to remove attributes on these elements:

.footer-block.grid__item {
	/* margin: 4rem 0; */
}
.list-menu__item {
    /* display: flex; */
    /* align-items: center; */
}

- Step 3: Save and see the result. You will get the result like this:

view - 2023-02-07T160227.611.png

I hope that this can help you solve the issue.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

PageFly-Kate
Shopify Partner
1125 331 328

This is an accepted solution.

Hi @shanagarryceo ,

 

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .footer__content-top {
        padding-left: 20px;
        padding-right: 20px;
    }
    .footer .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 10px;
        text-align: center;
    }
    .footer-block.grid__item {
        margin-top: 0 !important;
    }
    .list-menu__item {
        justify-content: center;
    }
}

I hope it would help you
Best regards,

Kate | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

shanagarryceo
Excursionist
52 0 4

Amazing Kate! Works perfectly 🙂 One more question, do you know how to centre the image in the footer on mobile? See below, the image is aligned left 

 

shanagarryceo_0-1675798160634.png

 

 

 

 

PageFly-Kate
Shopify Partner
1125 331 328

Hi @shanagarryceo ,

 

Sorry for late reply.
I don't see your logo.

PageFlyKate_0-1675861425610.png

Best regards,

Kate | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

beniwalanish
Tourist
8 0 2

hey how to reduce the gap between menu links and social media icons?

 

BSS-Commerce
Shopify Expert
3477 461 518

Hi @shanagarryceo 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development