Align Footer Content to Center using Debutify

[Yosemite98]

Hi there. Can somebody please help me with a solution for aligning the footer content to the center? I am using Debutify theme, and I searched the community and tried other solutions for the problem, but none of them worked for me. It might be because of the theme I am using. My website is https://skullutopia.com

[goldi07 · Accepted solution]

Hello @Yosemite98 

To center the footer content in the Debutify theme, you’ll need to add some custom CSS. Debutify often uses utility classes and specific structural layouts, so the standard solutions may not always work.

Fix: Center Align Footer Content in Debutify
Follow these steps:

1. Login to your Shopify admin panel.

2. Go to Online Store > Themes.

3. Click “Actions” > “Edit code” on the Debutify theme.

4. Open the file: Assets/theme.css or Assets/base.css (the main stylesheet, depending on your Debutify version).

5. Scroll to the bottom and add the following code:

/* Center footer content */
.footer__content {
  text-align: center;
}

.footer__content .footer__item {
  margin: 0 auto;
  display: block;
}

If your footer uses different class names (Debutify updates structure often), here's a more general fallback:

footer, .footer {
  text-align: center !important;
}

footer * {
  margin-left: auto !important;
  margin-right: auto !important;
}

6. Save the file and refresh your site.

you may also need to inspect your footer layout (Sections/footer.liquid) to ensure it isn’t using a grid or flex layout that overrides center alignment. If needed, I can guide you through adjusting that too.

Thank you 😊

[Yosemite98]

Hey @goldi07 , thanks for your reply. It partially worked, the text is aligned to center, just the logo/picture is not. I had to use the 2nd solution for more general fallback, the 1st one didn't work.

[goldi07]

Thanks for the update! Since the logo/image is still not centered, it likely needs specific targeting with CSS.

Let’s add one more snippet that targets images in the footer section and ensures they are centered regardless of container styling.

Add This CSS to Fix Logo Alignment:
In your theme CSS file (theme.css or base.css), add this below the existing code:

/* Center images in footer */
footer img,
.footer img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

This will:

. Make any img element in the footer act like a block (not inline).

. Automatically center it horizontally with margin: auto.

Once you save and refresh, the image/logo in that section should align with the rest of the centered text.

Thank you 😊

[Yosemite98]

That's awesome @goldi07 it worked. Everything's aligned now. Appreciate all your help.

[goldi07]

M glad that worked happy to help . if you need any help plz let me know 

if you think i was helpful could you buy me a coffee ??

Thank you 😊