How can I display my footer in 2 columns on mobile view?

[umber]

Hi All,

I want to display my footer in 2 columns as in menus should appear parallel. https://blushpunch.myshopify.com/ is the link to my website.

I am using Dawn theme currently.

Thank you in advance for all your help.

[PageFly-Victor · Accepted solution]

Hi @umber 

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file -> Save

@media screen and (max-width: 767px){

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: flex-end !important;

    justify-content: flex-start !important;

}

.footer-block.grid__item {

    width: 65% !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

[umber · Accepted solution]

Hi Victor,

The code has worked many thanks to you. Can you help me with the spacing between links and menus.

Thanks to you again.

[umber]

Hi John,

Thank you for the response but there is no such option as page layout in the theme dashboard.

[PageFly-Victor · Accepted solution]

Hi @umber 

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file -> Save

@media screen and (max-width: 767px){

.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: flex-end !important;

    justify-content: flex-start !important;

}

.footer-block.grid__item {

    width: 65% !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

[umber · Accepted solution]

Hi Victor,

The code has worked many thanks to you. Can you help me with the spacing between links and menus.

Thanks to you again.

[PageFly-Victor · Accepted solution]

@umber 

You can try with this code:

.footer-block__heading {

      margin-bottom:  4rem !important;

}

[krozynski]

hi - I tried your code above and it only displayed my first 2 columns and increased the page width.. can't seem to figure out a solution. can you help? 

site is casakay.xyz

thank you 

[krozynski]

nevermind, I did it differently, directly in the footer asset and added this code to the appropriate media screen section:

.footer .grid{

display: grid;

grid-template-columns: repeat(2, minmax(50%, auto));

}

//i have no idea if the minmax is correct I just played around with it//

 .footer__blocks-wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
height: auto;
column-gap: 5%;
}

.footer-block.grid__item {

    width: 100%

}

}

[Tobias5]

Yes, is it not better to place that code in the section-footer.css instead of the base.css anyway? Then at least it will only affect the footer, right?