Equal spaced footer columns

Support
#1

I posted this question once in the old support system but don’t have access to it now.

Can you tell me if I should look at bar, container or element to have these three footer column spaced equally apart.

thanks

#2

Hey there,

Try setting your container’s self flex to fill space equally.

For more tips and tricks, please see Pro related tutorials in our Knowledge Base

Thanks.

#3

Could you log into my site and see if I’ve missed anything? I tried setting fill space equally on the container but it isn’t having the effect I thought it would.

#4

Hi there,

I went to your website and copied the footer and set it to the front end and now you can see the result on the front page.

I added a background to the containers so you can see they are equal height.

See how I set flex properties in Bar and its respective containers.

Thank you

#5

Thanks for taking a look at that. I see the bar is set to row and to wrap children, however, when I reduce the browser width, the containers do not wrap. Is it suppose to wrap the containers such that they will stack on mobile?

#6

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 767px) {
.x-colophon .x-bar-container {
    width: 100% !important;
    flex: none !important;
    margin-bottom: 2% !important;
}
}

Let us know how this goes!