Center menu in footer?

[jasminsharp97]

I have looked through so many different suggestions and tried everything and I can't get the footer on my site to center. I see this option to center the menus in mobile, but even when I select that nothing in the footer is centered.

This is the site: https://km48zcng32s59bjx-27047230.shopifypreview.com

[BSSCommerce-B2B]

Hi @jasminsharp97 

You should try following the instructions below

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file theme.css and add this code snippet to the end of the file

 

@media screen and (min-width: 1024px) {
    .site-footer-blocks {
        justify-content: end !important;
    }
}

[jasminsharp97]

That didn't do anything, unfortunately.

[BSSCommerce-B2B]

I may have misunderstood what you're asking for. Could you clarify how you want the website to look after the modifications, the position of the elements being modified, and it would be helpful if you could provide some images with annotations on the elements

[jasminsharp97]

I want the menu and the text to all be centered, on every screeen and every size. And even though I see the option to center the menu on mobile and I've chosen that (in the screenshot in my original post) it didn't center it, and nothing changed after I tried the original suggestion you gave either.

[BSSCommerce-B2B]

Could you please try replacing the previous CSS snippet with this one?

@media screen and (min-width: 1024px) {
    .site-footer-blocks {
        justify-content: center !important;
    }
}

.site-footer-block-item, .site-footer-item--information {
    align-items: center !important;
}

.site-footer-block-content {
    text-align: center;
}

 Result

If it's helpful, please like and mark it as a solution, thank you

[jasminsharp97]

Super helpful! I'm most concerned about how it looks on mobile, and the dropdown arrows on the menus on mobile are in the middle of the text. Is there any way we can prevent that from happening?

[BSSCommerce-B2B · Accepted solution]

You please add this CSS section below.

.site-footer-block-icon {
   right: -20px !important;
}

result

[jasminsharp97]

Thank you so much! It worked! If I wanted to only have it centered on mobile can I just change the sizing to @media screen and (max-width: 719px)? Or is there something else I need to do to make it only centered on mobile? The client changed their mind and only wants things centered on mobile

[BSSCommerce-B2B]

You're right, it's totally possible to wrap all the CSS code I mentioned above inside.

@media screen and (max-width: 719px) {
  // css custom
}

and it will only center text on mobile screens, while on tablet and desktop screens, everything will still be left-aligned as it was initially

The final code snippet will look like this

@media screen and (max-width: 719px) {
    .site-footer-block-item, .site-footer-item--information {
        align-items: center !important;
    }

    .site-footer-block-content {
        text-align: center;
    }
    .site-footer-block-icon {
       right: -20px !important;
    }
}

You can also try removing the following CSS snippet because it doesn't affect mobile.

@media screen and (min-width: 1024px) {
    .site-footer-blocks {
        justify-content: center !important;
    }
}

Please like the comment if it's helpful

Best regards.