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

Luminaskn
Tourist
26 0 1

hi, 

 

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

Screenshot 2024-04-01 at 01.50.59.png

they currently look like this 

Screenshot 2024-04-02 at 00.32.39.png

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

Replies 4 (4)

Xipirons
Shopify Partner
136 24 29

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.

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Luminaskn
Tourist
26 0 1

Screenshot 2024-04-02 at 02.08.35.png

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

Xipirons
Shopify Partner
136 24 29

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 🙂

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

BrainStation23
Shopify Partner
260 43 41

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 

BrainStation23_0-1712039323819.png

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com