[Resolved] Bootstrap grid with different columns on large and medium screens before stacking on small

[Author]

Posts

[William Locatelli]

Hi Nigel,
Swiper bug was an Elementor issue. Now is fixed.

I need help for another issue.

If i use bootstrap grid code in views like this:
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
the result is like this: hidden link
not 3 colums in a row but only 2 and the last one above.

If i use the same code in a page with elementor or in a page blank works fine.

Can you help me? 🙂

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

When I visit the page and resize the browser, on medium screens I see 3 columns and on larger screens I see two columns, so I would say it is expected.

However, it is surely not what you want, because the content is being dynamically generated and a new row is added every 3 results, which is fine when you want to display 3 results in a row, but not when you have 2 columns, because each row in the markup results in one-and-a-half visual rows on the screen.

The solution in such a case as this is to move the row div outside of the wpv-loop tags, so that all of the results are output inside the same markup row (and because of flexbox they will reflow on the screen as required).

Can you try that? And if it doesn't look right I'll take a closer look.

[William Locatelli]

HI Nigel,
i've found the beg. Was a CSS code in my custom.css

Thanks for the support 🙂

[William Locatelli]

My issue is resolved now. Thank you!