How can I adjust the width of footer columns in my online store?

elegancethreads · ‎03-03-2024

I have three columns on my store's footer, i need first column to be wider, and rest two colums to be smaller.

could you someone take a look and advise pls , here is the link to store :

Elegance Threads- Buy Pakistani Stitched clothes in USA (772de6.myshopify.com)

PageFly-Noah · ‎03-03-2024

This is Noah from PageFly - Shopify Page Builder App

To adjust the width of the column footer you need to follow these steps:

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

Step 2: Choose file theme.liquid and past code above the </head>

  
<style>
@media only screen and (min-width: 1024px) {
    .footer__blocks-wrapper .footer-block:nth-child(1) {
         width: 50% !important;
     }
    .footer__blocks-wrapper .footer-block:nth-child(2) {
         width: 20% !important;
     }
    .footer__blocks-wrapper .footer-block:nth-child(3) {
         width: 20% !important;
     }
}
</style>

Additionally, you can adjust the % value you want.

Hope my solution will help you resolve the issue.

Best regards,

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

PageFly-Noah · ‎03-03-2024

Yes, Sure. You can add code below to above the tag <head>

<style>
   .footer-block__details-content li a{
      padding: 0px !important;
    }
</style>

Thank you for wating.

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

PageFly-Noah · ‎03-03-2024

This is Noah from PageFly - Shopify Page Builder App

To adjust the width of the column footer you need to follow these steps:

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

Step 2: Choose file theme.liquid and past code above the </head>

  
<style>
@media only screen and (min-width: 1024px) {
    .footer__blocks-wrapper .footer-block:nth-child(1) {
         width: 50% !important;
     }
    .footer__blocks-wrapper .footer-block:nth-child(2) {
         width: 20% !important;
     }
    .footer__blocks-wrapper .footer-block:nth-child(3) {
         width: 20% !important;
     }
}
</style>

Additionally, you can adjust the % value you want.

Hope my solution will help you resolve the issue.

Best regards,

Noah | 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.

elegancethreads · ‎03-03-2024

thank you very much that worked.

would you also be able to advise how to decrease the space between menu's in quick menu section on footer ?

thank you

PageFly-Noah · ‎03-03-2024

Yes, Sure. You can add code below to above the tag <head>

<style>
   .footer-block__details-content li a{
      padding: 0px !important;
    }
</style>

Thank you for wating.

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.

elegancethreads · ‎03-04-2024

perfect you are a champ. could you also check a question i just posted about collection page.

PageFly-Noah · ‎03-04-2024

Yes sure, I will check it.

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.