Creating 3 columns in the footer using Pro

Hi there,

How do I create 3 columns in the footer like this with 3 text headings followed by 1 column for the line and then two columns at the bottom for the link + inline navigation. I know which elements to use, but I can’t seem to set up the right spacing for the 3 columns.

Thank you so much :slight_smile:

1 Like

I am actually trying to get the Elements of these three columns to line up properly, all equally spaced horizontally and with Text headings all at the same height.

Thank you so much!

Hi @artthescience,

The Header Builder uses the Flex display system. So for this case you need to add Bar and inside that Bar, you need to add three Containers. Then add teh elements respectively inside the Containers.

Set the Flex property of the Bar to be Spread Equaliy. Then, you can set the Vertical option of the Flex property yo TOP. You have the same option for each individual Container.

For more information I suggest that you read up here and here.

Thank you very much!

How do I add 1 horizontal line below the 3 columns (containers).
If I try adding a new Bar, it looks like a whole new footer based on the shadows.

Thank you :slight_smile:

Not sure where you are seeing the options Spread Equally and TOP.

Here is what I see:

Hi @artthescience,

Sorry for the wrong message, I meant the Start options. And for the titles to go up and be on the same line you need to change the Vertical option in the screenshot that you gave and change the value to start.

You can do it on the Bar level or inside each individual container.

Thank you.

Thank you so much! I think I did it for the desktop view, but I don’t know how to set the footer Containers to stack on top of each other in mobile view:

Desktop:

Mobile:

Any idea on what I can do to make the footer Containers stack one on top of the other?

Thank you so much :slight_smile:

I think I figured it out:

I duplicated my “Bar” and made it in “Row” mode instead of “Column” and hid it for larger screens.

Is that correct?

Hi @artthescience,

In the Bar or Container Flex options if you check the Wrap Children option it usually gives proper mobile view by default:

Also, you can play with the Flex Grow and Shrink options and you will see that you can control most of the mobile view that way:

Finally, if you still have problems you can duplicate the bar and set it as a column in the flex options and then you can use the Hide During Breakpoint feature to hide/show the cases respectively in the mobile/desktop view.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

Thank you very much for your help! :slight_smile:

Anytime :slight_smile:

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