Shopify Impulse Theme Centering Footer

[FluidID]

I can’t seem to figure out how to center my footer in desktop view. I’ve tried adding all types of code using CSS but the footer will not center.

Fluid Identity

password 198082jc

[Shadab_dev]

@FluidID

198082jc

Do you need something like this?

Here the text are also center aligned? or just centering the 3 columns without centering the content?

[FluidID]

Yes I want the columns centered but not the text.

[Small_Task_Help]

@FluidID

I want the columns centered but not the text.

Hi,

Hope this will help

• At CSS file (theme.css or theme.scss.liquid), Add CSS below
  CSS example

/* Center footer columns but keep text left-aligned */
@media screen and (min-width: 768px) {
  .site-footer__content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px; /* space between columns */
  }

  .site-footer__item,
  .footer__block {
    flex: 0 0 auto; /* Don't stretch full width */
    text-align: left; /* Keep text inside each block aligned left */
  }
}

[FluidID]

@Small_Task_Help

@media screen and (min-width: 768px) {
  .site-footer__content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px; /* space between columns */
  }

  .site-footer__item,
  .footer__block {
    flex: 0 0 auto; /* Don't stretch full width */
    text-align: left; /* Keep text inside each block aligned left */
  }
}

The didn’t move anything until I removed “__content” from .site-footer__content. Now it’s almost center but squished.

[Shadab_dev]

try this at the very bottom on theme.css or grid.css file

@media screen and (min-width: 768px) {
.site-footer .grid {
width: 80%;
margin: 0 auto;
}
}

This is the final result:

You can play around with the width property defined in percentage. More of a quick solution and i hope this helps.