Horizontal arrangement for footer menu on craft theme

[jasondane]

Hello,

I can't seem to figure out how to change the footer menu to be arranged horizontally. Can anyone please help?

Also, I want to put the "subscribe to email" to be on the right side (refer to image)

Site: https://www.designfruit.com.au/

[Raj-WebDesigne]

Add This Css in your edit Code > base.css File 

@media screen and (min-width: 768px) {
    .footer .footer__content-top {
        display: flex;
        align-items: center;
    }       
}

[jasondane]

it worked for the subscribe to email section. My footer menu is still stacked vertically

[Raj-WebDesigne]

Try This One

@media screen and (min-width: 768px) {
    .footer .footer__content-top {
        display: flex;
        align-items: center;
    }       
   .footer-block--newsletter.scroll-trigger.animate--slide-in {
      width: 50%;
   }
}

[jasondane]

okay, i may not have been clear with my issue. The footer menu (Collection, Categories) are lined up vertically, I want them to line up horizontally

Thanks!

[Anshul_arora · Accepted solution]

Hello @jasondane ,

Please add the below-mentioned code at the bottom of the theme.liquid file before </body> tag for displaying the footer menu as horizontal and save.

<style>

ul.footer-block__details-content.list-unstyled {
display: inline-flex !important;
}

a.link.link--text.list-menu__item.list-menu__item--link {
line-height: 0 !important;
}

</style>

Output ->

I hope the code helps you.

Please share if you have any queries.

Thank you.

[jasondane]

This one did the trick. Thank you!

[INA_MSWEB]

Hello,

I am San from MS Web Designer.

 Edit code > base.css

@media screen and (min-width: 768px) {
    .footer-block--menu .footer-block__details-content {
        display: flex;
        align-items: center;
        flex-wrap:wrap;
    }       
 .footer-block--menu .footer-block__details-content .link{padding-top:0 !important}
}

Do let me know in case of any concerns.

Regards,

San