Width an "orphan" item of a looper

[501creative]

I set up a looper for posts using your example in the video (a single row using a 3-across column layout, breaking to 2 columns and finally 1 for mobile). I noticed the last item can stretch 100% of the width of the row if it is orphaned, say you only had seven posts total. I was attempting to control that width. Setting a maximum width percentage on the column itself didn’t work since it couldn’t regain the space at the other column counts.

I added a class to the column and used a media query to control the width until it switched to 2 columns, but I was wondering if I missed something obvious that could have allowed this from the Pro editor.

CSS I used:

@media only screen and (min-width: 979px){
.x-col.news-post-looper {
max-width: calc(33.33% - 30px) !important;
}
}

Thank you.

[ruenel]

Hello @501creative,

Thanks for writing in!

You do NOT need to add any custom CSS. Simply disable the “Grow” Layout Options in your row settings and the column width will just be the same as the other columns.

Kindly let us know how it goes.

[501creative]

Thanks so much. Still learning the tricks of flexboxes. Forgot about this item.

[tristup]

Hi @501creative,

You are most welcome, please let us know if you have any further issues.

Thanks