[Resolved] Columns skip a post and leave area blank.

[Author]

Posts

[bryanC-2]

I am trying to: For some reason under "Mobile" styling for phones. Showtimes columns don't have an even amount of boxes. (See image.

Link to a page where the issue can be seen: hidden link (On home page/second movie.) Must inspect in mobile to see.

I expected to see: 4 showtimes on left and 3 on the right.
Instead, I got: I see 5 showtimes on left and 2 on the right.

Originally, mobile had them stacked in one column full width. To change, I added this CSS.

.showtime-front-page .col-sm-4 {
width: 50%;
}
It's on line 894 of stylesheet style-front.css under the media query max-width 600px.

The view used to create this loop is called. "Show Times for Now Show Page"

I'm guessing this has more to do with Bootstrap, but I can figure it out.

Any help is appreciated

Thanks
Bryan

[Nigel]

Hi Bryan

The fundamental problem here is that Bootstrap grids are based on rows. If, for example, you squeeze 3 grid items into a row that has 2 columns then the third item will flow onto a new line (although still part of the same "row").

Then the next row starts and you left a gap at the end of the second visual line.

Which means it can work if you go from 6 to 3 to 1 columns, or from 4 to 2 to 1 columns, but not from 3 to 2 to 1 columns or anything similar.

There are two choices in such scenarios.

You can modify your View so that you jettison the normal markup generated for a Bootstrap grid so that it is more simple, with the div.row moved outside the wpv-loop tags so that there is only a single row.

It would look something like this:

	[wpv-items-found]
	<!-- wpv-loop-start -->
		<div class="row ">
		<wpv-loop>
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-alt-grid"]</div>
		</wpv-loop>
		</div>
    <!-- wpv-loop-end -->
	[/wpv-items-found]

You can update the classes for different sized screens there (per hidden link) according to your needs and everything should reflow as required.

Alternatively, you could drop BS and make up your own simple grid, editing the markup from the View output accordingly.

See here for an example: hidden link

[bryanC-2]

I got the help needed.

Thanks