Footer equal bars

[dhunink]

Hi,

following suggestion from several topics, I can’t seem to get the footer to act the way I want them.
I’ve got 4 containers and I’m trying to give them a flex layout where each bar will have the same width

So the bar itself has the ‘space evenly’ setting.

But as you can see below, the bars differ in width, and the fourth bar is pushed down.

What setting am I missing, to make all four containers have the same width, while still having the flex options where they will be pushed vertically when screen size is lower?

[ruenel]

Hello @dhunink,

Thanks for writing in!

You will need to define the maximum width of each Container element.

By setting it to 25vw or 25%, you will be able to have 4 equal widths.

Hope this makes sense.

[dhunink]

Hi @ruenel,
I tried that initially but that sets a non-responsive max width. Hence the desire to switch to a flex box-layout.
This is what happens when I give the first tow containers a max width of 25vw:

[ruenel]

Hey @dhunink,

You should also adjust the maximum width in specific screens sizes by way of the Responsive Styling.

• https://theme.co/docs/responsive-styling

Please provide us access to your site so we can check your element settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[dhunink]

Just added a secure note!

[tristup]

Hi @dhunink,

I have checked the footer and found that it is using the Global Container as Content Sizing ( as described in the 1st screenshot ). In the Global Settings the Site Width is set to 85% which is the reason behind your problem.

I would suggest you uncheck the Global Container option for the specific Bar and set width of the Container to 25% to adjust in the 100%. And also set Flexbox > Wrap to Off. You may need to adjust the Flexbox > Gap to adjust the gap between the columns once in the same row.

NOTE: I have created a duplicate footer and adjusted the value as explained above. You can check and replicate the same or can use it.

Hope it helps.
Thanks