How can I adjust footer layout for mobile view?

[isabellemaria]

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

[PageFly-Richard]

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;
}
}

I hope it would help you
Best regards,

Richard | PageFly

[isabellemaria]

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

[PageFly-Richard]

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;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[isabellemaria]

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]

Hi @isabellemaria ,

I checked it looks like you got the solution right?

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

Best regards,

Richard | PageFly

[SimplicitybyM]

I 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

[AlexDaSilva]

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.