Reduce space between footer navigation links (Studio Theme)

Reduce space between footer navigation links (Studio Theme)

ddenby
Excursionist
19 1 2

ON DESKTOP & MOBILE

newdawnart.com

FOOTER: The navigation spacing between the links is too much, is there a way to reduce the space between the navigation (Our Policies) and (Quick Links)? If so can you send me the code and where to place it?

 

ON MOBILE (ONLY)
FOOTER: Is there code to center the all the content in the footer on mobile only? Is so, can you send me the code and where to place it?

 

PS I want to mention that I am new to Shopify and am very impressed with the help I receive from the Shopify Community. I get faster responses and better solutions than when I go to Shopify support. Thank you for all you do!

Replies 3 (3)

oscprofessional
Shopify Partner
16266 2431 3161

Hello @ddenby 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (max-width: 749px){
.footer-block__brand-info {
    text-align: center !important;
    margin-top: 23px !important;
}
.footer-block__details-content {
    margin-bottom: 2rem !important;
}
.list-menu__item {
    display: block !important;
}
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free | OSCP Shipping Discounts App : Free
ddenby
Excursionist
19 1 2

Thank you but it did not work.

BSS-Commerce
Shopify Partner
3477 464 551

Hi @ddenby ,

 

Follow these steps
Go to your online store => Themes => Edit code

Problem 1: Find the section-footer.css file, add the following code to end of that file.

.footer-block__details-content .list-menu__item--link {
  padding: 0 !important;
}

Problem 2: Still add the following code to section-footer.css file above and add the following code to end of that file

@media screen and (max-width: 989px) {
  .footer-block__brand-info {
    text-align: center;
  }
  .footer-block.grid__item {
    text-align: center;
  }
  .footer-block__details-content {
    display: inline-block;
  }
  .footer-block__details-content .list-menu__item--link {
    justify-content: center;
  }
}

And then press save button on the corner

Hope this will help you @ddenby !

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


B2B Solution & Custom Pricing | Product Labels by BSS


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


BSS Commerce - Full-service eCommerce Agency