Craft adjust footer padding and font

[gege29]

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.

[gege29]

585358.myshopify.com

atwosk

[BSSCommerce-TC]

Hi @gege29 ,

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

[gege29]

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]

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

[PageFly-Amelia]

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