How to display two column footer menu on mobile for Sense theme?

[deadhare]

Hi there,

Could you please help me display the footer in two columns on mobile devices for my website, nunchi.care?

Thank you in advance for your assistance.

[BSS-Commerce]

Hi @deadhare ,

Please follow these steps:

Step 1: Go to admin → Themes → Edit code

Step 2: Find the base.css file and add the code to the end of the base.css file

@media screen and (max-width: 600px) {
    .footer-block.grid__item {
        max-width: 157px;
    }
    
    .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
        display: flex;
    }
    
    .footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {
        margin: 0;
    }
}

Result:

Hope it helps @deadhare

[deadhare]

Hi @BSS-Commerce ,

Thank you for providing a solution. I have tested it in the debugger and it works perfectly fine. However, when I tried it on my actual iPhone 13 Pro Max (with a clean cache/cookie), it didn’t work. I’ve attached the screenshots from both the debugger and my iPhone. Could you please take a look and let me know what might be causing the issue?

Thank you.

debugger

iphone

[BSS-Commerce]

Oh, so sorry
Please help me fix the code

   .footer-block.grid__item {
        max-width: 157px;
    }

change into

    .footer-block.grid__item {
        width: 45% !important;
    }

Thank you, if you find it useful, please give me a like.

[deadhare]

Thanks, @BSS-Commerce , It worked!