Margin between quick links in footer menu (Dawn Theme)

Solved

Margin between quick links in footer menu (Dawn Theme)

bellevo
Explorer
82 0 23

Hey, is there a way to move quick links and reduce the margin between them in the footer menu? Also if possible add a | between the "Brand information" And quick links section. Would appreciate any help with this! I will add a picture of the issue and desired outcome below.

Store url: https://bellevodesign.com/

Issue: Screenshot 2024-06-28 155425.png

 

Desired outcome: Screenshot 2024-06-28 155451.png

Accepted Solutions (3)

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

@bellevo 

- Here is the solution for you
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media screen and (min-width: 750px) {
    .grid--4-col-tablet .grid__item:not(:first-child)  {
       width: 17% !important;
    }
    .grid--4-col-tablet .grid__item:first-child {
           width: 37% !important;
    margin-right: 30px !important;
    padding-right: 20px !important;
    border-right: 1px solid !important;
    }
}

- Here is the result you will achieve:

BSSTekLabs_0-1719580567584.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

.footer-block__brand-info .rte {
     margin-bottom: 30px !important;
}

You can add code 

BSSTekLabs_0-1719582010752.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

@media only screen and (min-width: 750px) {
 .footer__localization:empty+.footer__column--info {
    align-items: revert !important;
 }
.footer__content-bottom-wrapper--center {
    justify-content: left !important;
}
}

- You can add code

BSSTekLabs_0-1719583018763.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 9 (9)

JasmeetVT14313
Shopify Partner
229 50 61

Hi @bellevo 
Yes, it's possible.
But this will require multiple file updates as per the screen sizes. Is it convenient for you provide me with the store access so that I can do it for you.

Unlock Your Store's Potential with a Free Consultation!
Ready to boost your Shopify store's performance?
Book a Free Consultation and get a comprehensive Store Audit today!
Don't miss this opportunity to enhance your online business.

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

@bellevo 

- Here is the solution for you
- Please follow these steps:

step.png

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

@media screen and (min-width: 750px) {
    .grid--4-col-tablet .grid__item:not(:first-child)  {
       width: 17% !important;
    }
    .grid--4-col-tablet .grid__item:first-child {
           width: 37% !important;
    margin-right: 30px !important;
    padding-right: 20px !important;
    border-right: 1px solid !important;
    }
}

- Here is the result you will achieve:

BSSTekLabs_0-1719580567584.png

 

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
bellevo
Explorer
82 0 23

Perfect, thank you for your help! One more question, is there a way to add padding between the "Brand information" Section and the "Social Links"

Issue: 

bellevo_0-1719581799608.png

 

Desired outcome: 

bellevo_1-1719581814611.png

 

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

.footer-block__brand-info .rte {
     margin-bottom: 30px !important;
}

You can add code 

BSSTekLabs_0-1719582010752.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSS-TekLabs
Shopify Partner
635 177 207

@bellevo  If you want a larger spacing, you can increase 30px to a bigger number

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
bellevo
Explorer
82 0 23

You are a life saver thank you! Sorry to bother you but one more question, I removed the Language / Country & Region selectors from the footer and it changed the position of the "Payment Method icons" and "Copy Right Content" in the middle of the screen, is there a way to put the payment methods icons to the right hand side of the screen while the Company name is on the left, thank you in advance you have been a huge help!

 

Issue: Screenshot 2024-06-28 164651.png

Desired outcome: Screenshot 2024-06-28 164655.png

BSS-TekLabs
Shopify Partner
635 177 207

This is an accepted solution.

@media only screen and (min-width: 750px) {
 .footer__localization:empty+.footer__column--info {
    align-items: revert !important;
 }
.footer__content-bottom-wrapper--center {
    justify-content: left !important;
}
}

- You can add code

BSSTekLabs_0-1719583018763.png

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
bellevo
Explorer
82 0 23

Thank you so much for all of your help, I really do appreciate it!

BSS-TekLabs
Shopify Partner
635 177 207

Hi @bellevo 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency