Solved

How to increase space between menu items while maintaining all columns in one row

MarielSalcedo
Visitor
2 0 0

MarielSalcedo_0-1712095504310.png

 

Hello, I need help with this. I want to increase the space between the 4 columns on my footer but maintaining all columns in one row. I have tried other solutions but they move the last column into another row. 

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4226 957 1604

This is an accepted solution.

Hi @MarielSalcedo 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media (min-width: 767px) {
.footer__blocks-wrapper.grid {
column-gap: 20px ;
}
.footer__blocks-wrapper .footer-block.grid__item {
    width: 20% !important;
}
}
</style>

If you want to increase or decrease gap, simply increase the 20px value 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

AHAY
Explorer
40 5 8

Depends on your theme you may be able to do it in the theme settings or by adding a custom css. What theme are you using ?
If doable in the theme settings, you should see so when you click on the relevant section/blocks when in the Theme > Customize. Look for 'Spacing' options. Again this depends on your particular theme. If not, then it should be easy done by adding custom css after figuring out which html element(s) you need to modify. I'm familiar with Dawn theme but I think the principles above should be the same.

If you find my answer useful please do like/accept it so I feel more motivated to help in my spare time.

PageFly-Richard
Shopify Partner
4226 957 1604

This is an accepted solution.

Hi @MarielSalcedo 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media (min-width: 767px) {
.footer__blocks-wrapper.grid {
column-gap: 20px ;
}
.footer__blocks-wrapper .footer-block.grid__item {
    width: 20% !important;
}
}
</style>

If you want to increase or decrease gap, simply increase the 20px value 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

MarielSalcedo
Visitor
2 0 0

@PageFly-Richard thank you so much!! This worked wonders. Grateful for your help.