2 Column and spacing fix in Footer Refresh theme mobile

[Lowry1]

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.

[Made4uo-Ribe · Accepted solution]

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!

[BSS-TekLabs]

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.

[Lowry1]

Hey @BSS-TekLabs 

Appreciate it.

URL: https://35a3c9-c7.myshopify.com/

Pass: ohmane

[Made4uo-Ribe · Accepted solution]

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!

[Lowry1 · Accepted solution]

Hi @Made4uo-Ribe 

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 </body> as well as added additionally <style> before code and after </style>

It looks like this:

<style>
@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;
}
}
</style>

Result:

it actually looks better directly on mobile then on desktop mobile view.