[Resolved] display view in grid / responsive

[Author]

Posts

[ericW-5]

Tell us what you are trying to do?

I would like to display a view in a grid with 3 elements per row on desktop but only 1 item per row on mobile.

here is my code, which currently displays 3 elements per row on desktop but unfortunately on mobile also.

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%" class="wpv-loop js-wpv-loop">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<tr>
<td class='small'>
[wpv-post-body view_template="loop-item-in-projets-page-projets"]
</td>
[wpv-item index=other]
<td class='small'>
[wpv-post-body view_template="loop-item-in-projets-page-projets"]
</td>
[wpv-item index=3]
<td class='small'>
[wpv-post-body view_template="loop-item-in-projets-page-projets"]
</td>
</tr>
[wpv-item index=pad]
<td></td>
[wpv-item index=pad-last]
<td></td>
</tr>
</wpv-loop>
</table>
<!-- 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-layout-end]

And I aslo have some css here, as - on desktop - I want the items to be 1/3 of the screen width in cases there is only 2 items to display for example. Here is my css :

@media only screen and (min-width:1280px) {
.small{
width: 32%;
}

You can see the issue here : hidden link

Thanks in advance

[Shane]

Hi Eric,

Thank you for getting in touch.

The problem here seems to be because your theme isn't loading bootstrap.

What you need to do is to go to Toolset -> Settings then scroll to bootstrap loading and set toolset to load bootstrap 3.

This should cause your columns to reflow correctly.

Thanks,
Shane

[ericW-5]

Hi Shane,

I changed the settings to "toolset to load bootstrap 3" but I still have 3 items per row on mobile.

Many thanks in advance for your help

Regards
Eric

[Shane]

Hi Eric,

Ok, so it seems you are using Tables.

Unfortunately tables are not responsive for mobiles so it won't reflow. What you need to do is to use the Loop Wizard on the view to generate your content using the Bootstrap Grid layout.

This will cause your items to reflow into a single column on mobile devices.

Please let me know if this helps.

Thanks,
Shane

[ericW-5]

My issue is resolved now. Thank you!

I did it differently finally : 1 view only visible for mobile and another one only visible for desktop.

Thanks and regards
Eric