A user seeks to modify the footer layout on mobile view in the Refresh theme, specifically wanting to:
Initial attempts to add custom CSS to theme.liquid failed. A solution was provided involving CSS code to be placed in the main.css/base.css file, targeting mobile screens (max-width: 749px) with grid layout adjustments.
Resolution: The original CSS placement in base.css didn’t work, but the user found success by wrapping the code in <style> tags and inserting it into theme.liquid before the </body> tag. This approach successfully achieved the desired 2-column footer layout with reduced spacing on mobile view.
The solution includes CSS modifications for footer padding, grid template columns, and margin adjustments specific to mobile breakpoints.
Hey,
Tried following instructions on other threads by inserting custom code to theme.liquid but nothing happens.
I would like to achieve changes shown in screenshot attached. Reduce excesive spacing between links and make quick links menus next to each other.
This is for mobile view.
Appreciate your assistance.
Hello @Lowry1
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.
Hi @Lowry1
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
@media screen and (max-width: 749px) {
.footer__content-top {
padding-bottom: 0;
}
.footer__content-top .grid {
display: grid;
grid-template-columns: auto auto;
max-width: 100%;
}
.footer-block.grid__item {
margin: 0;
}
.footer-block .grid--2-col .grid__item {
width: auto;
}
.footer-block__heading, .footer-block__details-content {
margin-bottom: 10px;
}
.footer-block__details-content .list-menu__item--link {
padding: 0;
}
.footer__blocks-wrapper.grid {
margin-top: 3rem;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you for providing the code. I tried placing code in base.css at the bottom but unfortunately nothing happened.
I thought of another solution which is actually worked!
I have placed your code inside theme.liquid before as well as added additionally before code and after
It looks like this:
Result:
it actually looks better directly on mobile then on desktop mobile view.
