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

[dhunink]

Hi @tristup,
thanks for the detailed response and the duplicated footer. Unfortunately even that duplicate doesn’t do what I’m after: if you look at that footer in the mobile view, the columns are all cramped up. I’m expecting the flex-behavior that works so well in normal rows.

[tristup]

Hi @dhunink,

For that you need to adjust the Width and Min Width to 100% on mobile devices for all the Containers and also need to set the Flex Direction to Column for the specific device. I made the changes in the duplicate footer, you can check that too.

Hope it helps.
Thanks

[dhunink]

Thanks @tristup, that’s really getting very close!
I’ve adjusted your copy so that the max-width is 0,85*1200=1020px, that looks almost perfect on desktop. Apart from the last column, which is the default latest post element:

Why will these text fall outside the viewport?

On mobile devices, the flex-direction works perfect. But the devices in between, that’s where I’m struggling. I still can’t really figure out how this works differently from editing columns on a page.

For example, given these settings, I expect two rows with two columns when viewing the laptop screen size:

But in reality you’ll see this:

I really want to understand this myself and I looked all over the documentation, but I just can’t find explanations of how these bars act differently and how I should configure them correctly. Please do educate me (and any further customers finding this topic ).

[ruenel]

Hello @dhunink,

I have made a demo in your footer. It turns out that you only added a minimum width and NO maximum width.

The maximum width is what limits the width of the container. It should be something like this:

Please do check the demo along with the responsive styling as well. Thanks.

[dhunink]

Hi @ruenel,
that’s just spot on perfect, thanks so much!
Contrarily to the earlier advice, this is still using the global container, which is beneficial as well. Thanks!

One final question: has this been described somewhere in the documentation and did I missed that? If not, may I recommend/ request that a responsive footer like this might become part of the Docs?
Even the Theme.co example with a three-column footer, does not behave responsive like this, and I do think it could save a lot of people a lot of time if some docs are available on this matter.

Thanks for helping me clearing this out tough, works perfectly!

[ruenel]

Hello @dhunink,

I have noted your comment on the documentation. We are glad we’re able to help you out.

Cheers.