Skip Navigation

[Resolved] Bootstrap Grid columns display the same amount of columns on mobile as desktop

This support ticket is created 4 years, 10 months 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.

This topic contains 1 reply, has 1 voice.

Last updated by Tulio 4 years, 10 months ago.

Author
Posts
#1962183

Thank you in advance for your help. I've been spinning my wheels here for two days trying to figure this out on my own

Tell us what you are trying to do?
- I'm trying to style a 3-column grid so that each column is full width on mobile, stacked one above the other. At the moment, the view displays three columns on all device widths, including mobile.

Is there any documentation that you are following?
- hidden link
- hidden link

Is there a similar example that we can see?
This is the Loop code
```
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-view-blog-posts"]</div>
[wpv-item index=other]
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-view-blog-posts"]</div>
[wpv-item index=3]
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-view-blog-posts"]</div>
</div>
[wpv-item index=pad]
<div class="col-md-4"></div>
[wpv-item index=pad-last]
<div class="col-md-4"></div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-pagination][wpv-pager-nav-links output="bootstrap" first_last_links="true" previous_next_links="true" reach="3"][/wpv-pagination]
[wpv-layout-end]
```
This is the template for this View
```

[types field='blog-preview-image' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='390' height='273' resize='crop'][/types]

[wpv-post-title]

[wpv-post-excerpt]
[wpv-post-date]

```

What is the link to your site?
hidden link

#1962223

My issue is resolved now. While it wasn't actually a solution, we changed the columns to a "card" type. This worked well enough but I'll open another ticket for the same issue with a different site. Since the domains are different, I want to keep the tickets apart.

Thank you anyways!