Footer 4 Cols

Hi there!

How can I make a footer like this, with 4 columns and top heading with Pro? The live site of that footer is here.

Thanks!

Hi there,

You can add 1 Bar and 4 containers. Set the maximum width of the containers to be about 25% and in the Bar, settings set the flex options to center or spread between. For more information about layout options in the Header and Footer builder kindly read this article:

After you have the 4 containers you can add whatever you want inside those containers. Don’t forget to set the flex property of each container to be column instead of row so all the stuff inside each container will stack up

Thank you.

Thank you so much for your quick reply. I have made that and have got the 4 cols in the footer but have one issue the max width get fits according to the content but the height doesn’t seem to work, can you have a look at this, please and suggest a fix?

Hi there,

I did not exactly understand what is the problem with the height of the content. The height of the content will expand to fit the content inside.

If that is not the case search for height options in the bar or Containers and make sure you set them to auto or none.

Thank you.

Hi there!

Thanks for your quick reply.

In the bar, I don’t find that but when changing that into the container it doesn’t work just return the value none automatically. See here What I’m missing? :thinking:

Thank you!

Hi there,

Is this your site http://j.mp/2D80yff? If not, please provide your site’s URL that has this footer. I’m still confused of what you wish to achieve with height.

Thanks!

Hi there!

That’s an example site I’m trying to achieve with Pro, if you could check the conversion I have got 4 cols but having the issue with content height.

Looking forward to hearing from you.

Thank you!

Please provide your site’s URL so we could check the setup of your footer.

Thanks.

I’m afraid that I don’t have it online yet, would you mind checking the videos I have sent previously that shows the issue?

Thanks

Please try setting your Bar’s height to auto.

If that doesn’t help, I’m sorry but we really need for you to setup an online dev site. Otherwise, we can do nothing to help.

Thank you for understanding.

Hi,

This worked perfectly thanks a lot. :tada:

One more thing, please I have set all containers to 25% of max width but the container get fits according to the width but not 25% of all area, If you could have another look at the video, please?

Thank you so much!

The max-width isn’t triggering because the space it already tight. It will only work if there’s space on the sides of the container. Try playing around with Self Flex. Try setting all of your containers to Fill Space. Pro’s layout is primarily powered by CSS Flexbox so it would be beneficial if you understand how it works. Here’s a guide.

Thanks.

Thank you!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.