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 tag

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.