Solved

How to decrease Space between Footer Menu links

Donnie202
Shopify Partner
9 0 2

Hello Everyone,

I am trying to reduce the spacing between the Footer menu links in my website. Any help would be much appreciated. Thanks!

Here is an image reference of what I mean

https://ibb.co/JCrvGX9

My website URL is

Singletary Fishing Co. – SingletaryFishingCompany

Password

Singletary

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3477 461 519

This is an accepted solution.

Hi @Donnie202 

This is BSS Commerce - Full-service eCommerce Agency. We'd love to suggest you this solution:

Step 1:  Online store -> themes -> edit code

Step 2: Search file base.css

Step 3: Insert this code at the end of the file, and then click "Save"

 

.footer-block.grid__item.footer-block--menu {
    width: 0%;
    margin-right: -200px;
}

 

If you want to increase the distance between the two menus, you can increase the margin-right property.

The result will be like this:

view - 2023-05-12T170702.565.png

Hope this helps you.

---------

BSS Commerce - Shopify Apps & Development Services Provider - Shopify Expert

Level up your Shopify store with our B2B & B2C apps

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 6 (6)

codewiser
Shopify Partner
76 34 32

Hello @Donnie202 

 

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 (min-width: 750px){
    .footer .grid .footer-block--menu:nth-child(2n) {width: 10%;}
}

 

If your problem solved then Like & Accept this Solution.
For Designing, Development and custom changes hire us. Email us Or WhatsApp Or Skype.
Donnie202
Shopify Partner
9 0 2

Hi @codewiser . Thank you for the input but it didn't work. What I'm trying to do is to reduce the wide spacing between the footer menu blocks.

https://ibb.co/JCrvGX9

Like reducing the space between the "Quick Links" section and the "Company Info" section.

Thanks.

BSS-Commerce
Shopify Expert
3477 461 519

This is an accepted solution.

Hi @Donnie202 

This is BSS Commerce - Full-service eCommerce Agency. We'd love to suggest you this solution:

Step 1:  Online store -> themes -> edit code

Step 2: Search file base.css

Step 3: Insert this code at the end of the file, and then click "Save"

 

.footer-block.grid__item.footer-block--menu {
    width: 0%;
    margin-right: -200px;
}

 

If you want to increase the distance between the two menus, you can increase the margin-right property.

The result will be like this:

view - 2023-05-12T170702.565.png

Hope this helps you.

---------

BSS Commerce - Shopify Apps & Development Services Provider - Shopify Expert

Level up your Shopify store with our B2B & B2C apps

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Donnie202
Shopify Partner
9 0 2

Hi @BSS-Commerce 

This works. Thank you!

Please how can I adjust the spacing on mobile?

https://ibb.co/3vDs0W1

Much appreciated.

Donnie202
Shopify Partner
9 0 2

Done already. Thanks.

PlaySub
New Member
10 0 0

Hello @BSS-Commerce 

would you mind helping me out to fix the same issue in Mobile? I need to reduce the spacing between the footer blocks.

 

PlaySub_0-1713661523832.jpeg