How can I make my website footer responsive on mobile screens?

Store Design
1

Hello,

I finished designing my homepage but I am having problems with the footer. It is not responsive as the mobile screen gets smaller.

It looks like this on desktop,

Screen Shot 2022-05-17 at 1.22.45 PM.png
Screen Shot 2022-05-17 at 1.22.45 PM.png4095×430 51.6 KB

Then on smaller screens, it’s like this,

Screen Shot 2022-05-17 at 1.24.17 PM.png
Screen Shot 2022-05-17 at 1.24.17 PM.png1252×1825 188 KB

Here’s the link to the preview,

https://vvy60eymsfxh1o5o-44305055895.shopifypreview.com

2

@orange1989 ,

@media only screen and (max-width: 768px) {
.seven.columns, .nine.columns {
    width: 100%;
    text-align: center;
}
.footer_menu li {
    display: inline-block;
    padding: 7px;
    margin: 0;
}
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid

3

Thank you @oscprofessional ! It worked!. I just have one concern though.

It is not centered.

Screen Shot 2022-05-17 at 7.05.10 PM.png
Screen Shot 2022-05-17 at 7.05.10 PM.png779×1686 86 KB

4

@orange1989 ,

@media only screen and (max-width: 768px) {
.seven.columns, .nine.columns {
    width: 100%;
    text-align: center;
}
.footer_menu li {
    display: inline-block;
    padding: 7px;
    margin: 0;
}
ul.footer_menu {
    margin: 0;
}
}

please update the code.

5

It worked! Thank you.

How about hiding a section for mobile view then another one will appear?

Here’s the section id I want to hide,

shopify-section-template–15560919089303__1651929001beae71c0

Here’s the one I want to appear when the one above is hidden,

shopify-section-template–15560919089303__165271530693be1672

Thank you, @oscprofessional

6

@orange1989 ,

Please share the screenshot