Profile: larryB-3

Problem:

I can't figure out the CSS needed to make it go to 100% of the container.

Solution:

It is a CSS issue, you can try CSS codes, for example:

https://toolset.com/forums/topic/custom-post-type-need-to-expand-width-of-screen-on-display/#post-1741527

Relevant Documentation:

Problem:
With the Bootstrap grid output format for a View on smaller screens the grids collapse to a single column with no intermediate state with fewer columns possible.

How is it possible to go from 3 columns down to 2 columns down to 1 column as the screen width reduces?

Solution:
It is not possible to go from 3 to 2 to 1, though it is possible to go from 4 to 2 to 1, for example.

The reason is because of how the Bootstrap grid uses divs with a class of row for each row, combined with automatically generating the markup by iterating over the posts in a loop.

If you include too many col divs in a row div they will spill over visually into the next row. This makes it possible to include four col divs that display as four columns on wider screens but break into two then two columns on medium-sized screens.

For a 4-column grid where the Loop Wizard creates divs with a class of col-md-3, for example, you should manually edit this to also add a class of col-sm-6, like so:

<div class="col-md-3 col-sm-6">

Relevant Documentation:
https://getbootstrap.com/docs/4.3/layout/grid/