Column content not flowing

This support ticket is created 4 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tagged: Views, Views plugin

This topic contains 1 reply, has 2 voices.

Last updated by Waqar 4 years, 1 month ago.

Assisted by: Waqar.

Author

Posts

October 7, 2020 at 2:21 pm #1803189

Pete

Hi there,

On this new page: hidden link

Toolset support kindly offered help regarding making a 3 col for desktop go to a 2 col for tablet.

However, only just noticed the grid items don't flow right, and spaces are created.

See attached, on tablet there is a space.

Now this never happens on these pages of which we have many: hidden link
These always flow and there is never a space.

Can anyone offer a suggestion on remedying this please?

I have tried changing the expert length however what works for one, wont work for another.

Many thanks.

October 8, 2020 at 7:20 am #1804041

Waqar

Hi Pete,

Thank you for contacting us and I'd be happy to assist.

Those extra spaces seem to be the result of variable heights of the result item blocks.

To make sure they have equal heights, you can include a special class "equal-heights" to the wrapping div with the class "row":


<div class="row equal-heights">

And then include the following custom CSS code in the view:


.row.equal-heights {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}

.row.equal-heights > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

I hope this helps.

regards,
Waqar