Craft adjust footer padding and font

Craft adjust footer padding and font

gege29
Visitor
3 0 0

I'm running craft version 12.0

 

I need the following footer to be adjusted the following way:

 

  • Menus on the edge of the screen, for left menu on the edge of the left, for right menu on the edge of the right, no matter what resolution the client is using.
  • Logo to be always on the center.
  • I would like to change the font of the Menu title (heading) and the menu links too, font size too.

 

Replies 5 (5)

gege29
Visitor
3 0 0

Screenshot 2024-07-07 152338.jpg585358.myshopify.com

atwosk

BSSCommerce-TC
Shopify Partner
215 46 49

Hi @gege29 ,

What's font and size you want change ? Is this result you want ?

BSSCommerceTC_0-1720362652672.png

 

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


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

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


BSS Commerce - Full-service eCommerce Agency
gege29
Visitor
3 0 0

Yes, this is the padding I want but could it be center alligned?. 

 

I'm not sure about font size and font, I have to decide yet. For testing sake lets say I want 16 size for header and 12 for menus, font Arial. 

BSSCommerce-TC
Shopify Partner
215 46 49

Hi @gege29 ,

This is the code applied for desktop screens with a width of 750px or more. Please insert at the end file base.css

 

body {
    font-family: Arial, sans-serif;
}

@media screen and (min-width: 750px) {
    .footer__content-top {
        margin: 0;
        display: contents;
    }
    
    .footer-block.grid__item.footer-block--menu:last-child {
        text-align: right;
    }

    .footer-block__heading {
        font-size: 16px !important;
    }

    .footer-block__details-content > li {
      margin-right: 0 !important;
     }
}

 

Hope this can help you

 

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


MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |

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


BSS Commerce - Full-service eCommerce Agency

PageFly-Amelia
Shopify Partner
493 154 222

Hi @gege29 

This is Amelia from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code. 

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

.footer-block {

    text-align: center;

}

.footer-block li {

    margin: 0 !important;

}

.footer-block  a.link.link--text.list-menu__item.list-menu__item--link {

    font-size: 20px !important;

    font-family: 'Americana' !important;

}

 

Hope that my solution works for you.

Best regards,

Amelia | PageFly

 
 

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 
➜ Weekly updated Shopify tutorials on YouTube 


All features are available from Free plan. Live Chat Support is available 24/7.