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

[orange1989]

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,

Then on smaller screens, it's like this,

Here's the link to the preview,

https://vvy60eymsfxh1o5o-44305055895.shopifypreview.com

[oscprofessional]

@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

[orange1989]

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

It is not centered.

[oscprofessional]

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

[orange1989]

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 

[oscprofessional]

@orange1989 ,

Please share the screenshot