Centering 3 columns in a 4 column row

[detailsguy]

Hi there,

This is a bit of a difficult one to explain but I have 2 4 column rows stacked that are all the same width. In the second row, I just have 3 of the columns filled and I want to maintain that same width (to match the above column, but also to center the 3 column row below. I tried doing a custom row layout to 1/8 + 1/4 + 1/4 + 1/4 + 1/8 but it doesn’t fly, and I can’t just disappear the blank 4th column because then the columns in that row become much wider than the columns in the row above that they are supposed to match.

Sorry if the description is confusing, screenshot included below:

[ruenel]

Hello @BodhiJames,

The columns always aligns to the left. If you left any of the column empty, it will have a blank or empty space. You may need to set a maximum width and align the left and right margin to right so that it will be centered. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[detailsguy]

Oops, yeah, sorry about that, the temp url is: http://87f.c2e.myftpupload.com/teacher-training-faculty/#authorized-teachers

[ruenel]

Hello @BodhiJames,

Thanks for providing the url. To resolve your issue, please do this:

• Please switch the empty column from being the last to be the first column.
• In the column setting of the empty column which is now the first column, insert this inline element css

.$el {
  max-width: 11%;
}

We would loved to know if this has work for you. Thank you.

[detailsguy]

Thank you Rue, great fix!

All worked well, just one note for anyone else reading the post for info later, they will need to remove the period before the $ in the css you posted, otherwise it won’t work.

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!