Solved

How can I add a fourth column to my website footer?

SamaraShuter
Tourist
4 0 1

Hi there, 

 

I am trying to add a 4th column to my shopify footer however it just pushes the forth item below the three columns. How do I get it all on the same row? 

 

You can view my website here: https://shuter.club/

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1808 510 383

This is an accepted solution.

Hey @SamaraShuter,

 

Sorry, scratch that. I made a small mistake in the code, 

 

I edited the post above, but i'll paste the modified one here again

<style>
@media only screen and (min-width: 1089px) {
    .Footer__Inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    
    .Footer__Aside {
        margin-left: auto;
    }    
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
1808 510 383

Hey @SamaraShuter,

 

If you mean these 4 columns, 

ThePrimeWeb_0-1707859845211.png

 

 

Then follow these instructions 😊

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

Only for desktop, it'll look ugly on mobile.

 

<style>
@media only screen and (min-width: 1089px) {
    .Footer__Inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    
    .Footer__Aside {
        margin-left: auto;
    }    
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_1-1707859892583.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
SamaraShuter
Tourist
4 0 1

Thank you, unfortunately it did not work. I pasted the code where you suggested and it did not change anything

ThePrimeWeb
Shopify Partner
1808 510 383

Hey @SamaraShuter,

 

It's confusing me, because when I visit your site, this is what I see.

ThePrimeWeb_0-1707860582688.png

 

Can you share a screenshot of how you see it?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ThePrimeWeb
Shopify Partner
1808 510 383

This is an accepted solution.

Hey @SamaraShuter,

 

Sorry, scratch that. I made a small mistake in the code, 

 

I edited the post above, but i'll paste the modified one here again

<style>
@media only screen and (min-width: 1089px) {
    .Footer__Inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    
    .Footer__Aside {
        margin-left: auto;
    }    
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
SamaraShuter
Tourist
4 0 1

This worked great, thank you!