Footer menu alignment on desktop and mobile

[HH_2023]

Hello,

I need some help with my footer using TASTE theme, url https://handshere.net

1. On desktop, how do I align the footer menu to the left?

2. On mobile, how do I align the footer menu to center?

I've tried various CSS code from other discussions but they are not working for my theme.

Thanks in advance for you help wizards!

[Dan-From-Ryviu]

Please use this code to do that 

@media (min-width: 750px) {
footer .footer-block:only-child:last-child {
    text-align: left;
    max-width: 100%
}
}
@media (max-width: 749px) {
footer ul.footer-block__details-content {
    margin: 0 auto;
    max-width: 24rem
}
}

[Moeed]

Hey @HH_2023 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.footer-block:only-child:last-child {
    max-width: 100% !important;
    text-align: -webkit-left !important;
}
}
@media screen and (max-width: 767px) {
a.link.link--text.list-menu__item.list-menu__item--link {
    justify-content: center !important;
}
}
</style>

RESULT:

If I managed to help then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[AiTrillion]

Hi @HH_2023 ,

For mobile to make it center, please add below CSS to Base.css by going to Theme >> Edit code >> Search for base.css and paste it at the bottom and it will appear to the center.

@media screen and (max-width: 989px) {

.footer-block__details-content .list-menu__item--link {

 display: block;

 text-align: center;

}

}

@media screen and (max-width: 786px) {

.footer-block__details-content .list-menu__item--link {

 display: block;

 text-align: center;

}

}

For desktop copy the below code and paste it to base.css

.footer-block.grid__item.footer-block--menu.scroll-trigger.animate--slide-in {

display: block;

text-align: left; 

margin: 0;

}

If you stuck somewhere, feel free to message me or reply me.

[WebDeskSolution]

Hello @HH_2023 

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.
• Click on Online Store > Themes.

• Find the live theme and then click Actions > Edit code.

• Search base.css
• Insert the provided CSS code at the end of the file and save the changes.

.footer .footer__blocks-wrapper .footer-block.grid__item
{
    width: 100%;
    max-width: unset;
    text-align: left;
}
@media screen and (max-width: 479px)
{
    .footer .footer__blocks-wrapper .footer-block__details-content .list-menu__item {
        justify-content:center;
    }    
}

Please hit Like and Mark it as a Solution if you find our reply helpful.