How can i align all columns in footer so they are centered and have the same spacing between them?

[Luminaskn]

hi,

im trying to align all three columns in footer so that they look like this

they currently look like this

i would like them to have even spacing between them and for them to be centred.

[Xipirons]

Hi @Luminaskn

To center align all the columns in the footer and have even spacing between them, you can use css flexbox.

Here are how to do that :

1. In your theme’s CSS file (like theme.css.liquid or custom.css.liquid), target the footer container that holds the columns. The exact class name may vary depending on your theme. For example:

.footer__content-top {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

This will enable flexbox, distribute the available space evenly between the columns using justify-content: space-between, and allow the columns to wrap on smaller screens with flex-wrap: wrap.

2. Target the individual footer columns and make them grow and shrink equally using flex: 1 1 auto. Add horizontal margins for spacing and center-align the content:

.footer-block {
flex: 1 1 auto;
margin: 0 15px;
text-align: center;
}

3. Use media queries to adjust the layout for mobile responsiveness. For example:

@media screen and (max-width: 768px) {
.footer-block {
flex: 1 1 100%;
margin: 15px 0;
}
}

This will make each column take the full width and add vertical spacing between them on screens under 768px wide.

Remember to adjust the class names, margins, and breakpoints as needed to match your theme’s structure. Test the layout on both desktop and mobile to ensure it is responsive and well-spaced on all screen sizes.

If the provided CSS doesn’t work as expected, inspect your theme’s footer HTML structure and CSS to identify the correct selectors to target.

You may need to override existing styles or use more specific selectors to achieve the desired layout.

[Luminaskn]

I am still not able to get it right.

can you look at my store and see what i did wrong?

URL: luminaskn.co.uk

password: Lumina2506

[BrainStation23]

HI @Luminaskn
You can try this code to achieve your result

1. Go to online store->Edit code->section-footer.css file and add the below code

.footer-block__details-content {
    margin-bottom: 4rem;
     text-align: left; 
}
footer-block__brand-info {
     text-align: left; 
}
.footer-block--newsletter {
    position: absolute;
    left: 15px;
    top: 141px;
    width: 420px;
}
.footer__blocks-wrapper{
    display: flex !important;
    flex-direction: row-reverse !important;
}
}

Result

[Xipirons]

I’ve checked your site and it looks good in the footer, all you need to do now is center the h2 titles, and maybe harmonize the font size to have the same in all columns