Center 3 columns within 4 column layout?

[sc8tty]

Hello! We are using the 4-column layout for our team page, but sometimes we only have three columns worth of content for a certain row. Can you help us center these 3-column rows within the 4-column layout? Ideally a solution would also work if a row only has 1 column of content.

See owaves.com/team for reference.

Thanks!

[nabeel]

Hi @sc8tty,

Thank you for reaching out to us. An ideal solution would be to use 3 columns layout if you have content for three columns only and use single column if you have content for 1 column

To center align the columns, go to your section’s settings, under Formatting select Center Align

Hope this helps!

[sc8tty]

The problem is that we want the columns to stay at the 4-column width, even where there are only 3, or 1. That way the team members will always look centered and have consistent width. Is there some CSS we can use for this?

[rad]

Hi @sc8tty,

That’s a bit tricky since column width isn’t always the same depending on column count and device view. Forcing it isn’t responsive and will cause more issue. And there is no way to center a column on a 4 column layout since each is evenly distributed. Perhaps, you can just modify the row max-width where your columns are. Example,

It will narrow your row and automatically center the 3 columns.

Thanks!