How can I adjust footer padding and text section size on my website?

Solved

How can I adjust footer padding and text section size on my website?

TheUnavailable
Tourist
18 0 2

Hello, here is my site: https://2cc3d4-2.myshopify.com/?_ab=0&_fd=0&_sc=1

I'd like to make the sections in my footer tighter and less spaced like this: 

TheUnavailable_0-1700427869359.png
I'd also like to make the text size in the rich text section in my footer (Disclaimer) smaller. 

Thank you for your help. 

 

Accepted Solution (1)

BSS-Commerce
Shopify Partner
3477 463 527

This is an accepted solution.

Hi @TheUnavailable ,

 

As your requirement: "Footer Padding + Text Section Size", you can try this follow my guide: 

Step 1: Go to Online Store => Themes => Edit code 

view - 2023-11-20T181116.009.png

Step 2: Search base.css, and add the scripts in the end of file : 

- Font-size 12px handle "text section size" as same as column "Customer Care" and "Our Policies" in your Footer.

- Block Grid flex, handle footer padding as same as the picture you sent.  Width of column " Customer Care" = " Our Policies" = 1/2 "Disclaimer". 

- You can increase the font-size of the footer to look similar to the sample photo.

.footer-block__details-content.rte {
    font-size: 12px !important;
};

.footer-block.grid__item {
    flex: 2;
};

.footer-block.grid__item.footer-block--menu {
    flex: 1;
};

Step 3: Reload your store and check the result. 

The resulting picture: 

view - 2023-11-20T181231.999.png

If my solutions helps, plz tick marked as solutions. Tks and have a nice day!  @TheUnavailable 

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

View solution in original post

Replies 3 (3)

dmwwebartisan
Shopify Partner
12321 2551 3715

@TheUnavailable 

This needs customization of your footer code to achieve this result.

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

BSS-Commerce
Shopify Partner
3477 463 527

This is an accepted solution.

Hi @TheUnavailable ,

 

As your requirement: "Footer Padding + Text Section Size", you can try this follow my guide: 

Step 1: Go to Online Store => Themes => Edit code 

view - 2023-11-20T181116.009.png

Step 2: Search base.css, and add the scripts in the end of file : 

- Font-size 12px handle "text section size" as same as column "Customer Care" and "Our Policies" in your Footer.

- Block Grid flex, handle footer padding as same as the picture you sent.  Width of column " Customer Care" = " Our Policies" = 1/2 "Disclaimer". 

- You can increase the font-size of the footer to look similar to the sample photo.

.footer-block__details-content.rte {
    font-size: 12px !important;
};

.footer-block.grid__item {
    flex: 2;
};

.footer-block.grid__item.footer-block--menu {
    flex: 1;
};

Step 3: Reload your store and check the result. 

The resulting picture: 

view - 2023-11-20T181231.999.png

If my solutions helps, plz tick marked as solutions. Tks and have a nice day!  @TheUnavailable 

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
TheUnavailable
Tourist
18 0 2

Thank you. 

Where do I add it? Before the last }?

TheUnavailable_0-1700530456245.png