Margin between quick links in footer menu (Dawn Theme)

[bellevo]

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: 

Desired outcome: 

[BSS-TekLabs · Accepted solution]

@bellevo 

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

 

- 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:

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

[BSS-TekLabs · Accepted solution]

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

You can add code 

[JasmeetVT14313]

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.

[BSS-TekLabs · Accepted solution]

@bellevo 

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

 

- 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:

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

[bellevo]

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: 

Desired outcome: 

[BSS-TekLabs · Accepted solution]

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

You can add code 

[BSS-TekLabs]

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

[bellevo]

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: 

Desired outcome: 

[BSS-TekLabs · 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

[bellevo]

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

[BSS-TekLabs]

Hi @bellevo