Solved

How can I adjust footer layout for mobile view?

isabellemaria
Pathfinder
137 0 17

Hi there!

 

Can you tell me how I can get all the 3 footer "boxes" with the text next to each other in the mobile view and with less spacing in between the lines? I would like the footer to look like in the desktop view.

 

URL: https://taneraskin.com/

 

Best,

Isabelle

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4226 956 1603

This is an accepted solution.

Hi @isabellemaria 

 

You can try below code in section-footer.css file:

@media screen and (max-width: 749px) {
.footer__content-top {
    padding-left: 10px;
    padding-right: 10px;
}
.footer__blocks-wrapper {
    display: flex !important;
    flex-wrap: nowrap;
}
.footer__blocks-wrapper .grid__item {
    max-width: calc(100% / 3);
    margin: 0 !important;
}
    .footer-block__details-content {
        margin-bottom: 10px;
    }
    .footer-block--newsletter {
        margin-top: 10px;
    }
    .footer-block__details-content .list-menu__item--link {
        padding: 0;
        font-size: 10px;
    }
}

 

PageFlyRichard_0-1677825799924.png

I hope it would help you
Best regards,

Richard | 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 7 (7)

PageFly-Richard
Shopify Partner
4226 956 1603

Hi @isabellemaria ,

 

This is Richard 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: 10px;
    padding-right: 10px;
}
.footer__blocks-wrapper {
    display: flex !important;
    flex-wrap: nowrap;
}
.footer__blocks-wrapper .grid__item {
    max-width: calc(100% / 3);
    margin: 0 !important;
}
}

 

PageFlyRichard_0-1677762120133.png

 

I hope it would help you
Best regards,

Richard | 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.

isabellemaria
Pathfinder
137 0 17

Is it possible to also reduce the space between the lines and make the font a bit smaller so it doesnt overlap?

PageFly-Richard
Shopify Partner
4226 956 1603

This is an accepted solution.

Hi @isabellemaria 

 

You can try below code in section-footer.css file:

@media screen and (max-width: 749px) {
.footer__content-top {
    padding-left: 10px;
    padding-right: 10px;
}
.footer__blocks-wrapper {
    display: flex !important;
    flex-wrap: nowrap;
}
.footer__blocks-wrapper .grid__item {
    max-width: calc(100% / 3);
    margin: 0 !important;
}
    .footer-block__details-content {
        margin-bottom: 10px;
    }
    .footer-block--newsletter {
        margin-top: 10px;
    }
    .footer-block__details-content .list-menu__item--link {
        padding: 0;
        font-size: 10px;
    }
}

 

PageFlyRichard_0-1677825799924.png

I hope it would help you
Best regards,

Richard | 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.

isabellemaria
Pathfinder
137 0 17

HI Richard,

 

This works quite well, however there are still some things missing with this code:

- The Land/region (language) button is not in the middle (centered) now ➔ how to center it?

- The font is rose colored. ➔ how to make it white?

 

www.taneraskin.com 

 

Best, 

Isabelle

PageFly-Richard
Shopify Partner
4226 956 1603

Hi @isabellemaria ,

 

I checked it looks like you got the solution right?

PageFlyRichard_0-1678090893513.png

 


Do you have a problem that I can help you with?

Best regards,

Richard | 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.

SimplicitybyM
New Member
4 0 0

Richard, I have the same request as Isabellemaria. I tried to copy-paste the code, but I cant find the section-footer.css. I have only the footer-group.json and footer.liquid. Can you help me? I would like to know where I need to put the code. Thanks

Capture d'écran 2023-11-30 165635.png

AlexDaSilva
New Member
16 0 0

Hi Richard. I had the same problem and i used your code above. It worked however the 4th element on my footer now lies outside the margins (see image below). How do i edit the code so that all 4 elements are lined up next to each other. 

IMG_5810.jpg