Trying to Achieve Three Even Width Columns, Responsive

[SavageCreativeSoluti]

I am trying to create a footer that has three evenly spaced columns. What is the best way to achieve this? On mobile, I would like each column to stack underneath each other at the full width of the screen. Can you please help?

Here is the link to what I have to far: https://prothemetutorials.com/.

[thai]

Hi There,

Please follow these steps:

• Enable the Wrap Children option of your bar:

• Add 3 containers to your bar then set the Flex Basis of each container to 360px(you can it to another width):

Hope it helps

[SavageCreativeSoluti]

Thank you for your quick reply! Is there any way to create a separate flex-basis for different responsive points without using custom css? It looks a little weird on tablet.

I originally tried using percentages but it didn’t appear I could edit them differently at each responsive point. Otherwise, that would of worked perfectly.

[rad]

Hi Paul,

That’s not currently possible with the current feature. So yes, it would require custom CSS using @media. Example, you can add this

@media ( max-width: 979px ) {
$el.x-bar-container {
    flex: 0 1 auto !important;
}
}

To your container’s Element CSS

Of if you really dont’ wish to use CSS, then you can add multiple container and hide each from the device (each has its own flex setting). You can do that by toggling on that Hide During Breakpoints options from that screenshot.

Thanks!