Solved

Two column footer menu (Sense theme)

deadhare
Tourist
6 0 2

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.

Accepted Solutions (2)

BSS-Commerce
Shopify Expert
3376 447 495

This is an accepted solution.

Hi @deadhare ,

Please follow these steps:

Step 1: Go to admin -> Themes -> Edit code

view - 2024-01-16T111239.684.png

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

view - 2024-01-16T111315.090.png

Result: 

view - 2024-01-16T111324.315.png

Hope it helps @deadhare 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

BSS-Commerce
Shopify Expert
3376 447 495

This is an accepted solution.

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 4 (4)

BSS-Commerce
Shopify Expert
3376 447 495

This is an accepted solution.

Hi @deadhare ,

Please follow these steps:

Step 1: Go to admin -> Themes -> Edit code

view - 2024-01-16T111239.684.png

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

view - 2024-01-16T111315.090.png

Result: 

view - 2024-01-16T111324.315.png

Hope it helps @deadhare 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

deadhare
Tourist
6 0 2

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

deadhare_0-1705422217564.png

iphone

 

IMG_6618.PNG

 

BSS-Commerce
Shopify Expert
3376 447 495

This is an accepted solution.

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

deadhare
Tourist
6 0 2

Thanks, @BSS-Commerce , It worked!