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.
Hi John,
Thank you for the response but there is no such option as page layout in the theme dashboard.
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
1 Like
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.
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
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%
}
}
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?