[Resolved] Responsive Column Grid in View

[Author]

Posts

[chantalM]

Tell us what you are trying to do?

I have tried to design a grid using the Table-based Grid option but I couldn't get it to look how I wanted, so I enabled Bootstrap grid and managed to create a 3 column grid. However, no matter what I try, I cannot make it responsive.. it is currently 3 column on desktop and tablet, and 1 column on mobile. How do I make it 2 column on tablet please?

This is my code:

<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-category-area-page"]</div>
[wpv-item index=2]
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-category-area-page"]</div>
[wpv-item index=3]
<div class="col-md-4">[wpv-post-body view_template="loop-item-in-category-area-page"]</div>
</div>
[wpv-item index=pad]
<div class="col-md-4"></div>
[wpv-item index=pad-last]
<div class="col-md-4"></div>
</div>

What is the link to your site?

hidden link

[Luo Yang]

Hello,

I assume you are using Bootstrap 4 in your website, if it is, you can follow Bootstrap to setup the grid CSS class names, for example:
Replace all class="col-md-4" with:
class="col-md-6 col-xl-4"

And test again

More help:
hidden link

[chantalM]

Hi Luo,

I changed my code to this:

<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">

<div class="col-md-6 col-xl-4">[wpv-post-body view_template="loop-item-in-category-area-page"]</div>
[wpv-item index=2]
<div class="col-md-6 col-xl-4">[wpv-post-body view_template="loop-item-in-category-area-page"]</div>
[wpv-item index=3]
<div class="col-md-6 col-xl-4">[wpv-post-body view_template="loop-item-in-category-area-page"]</div>
</div>
[wpv-item index=pad]
<div class="col-md-6 col-xl-4"></div>
[wpv-item index=pad-last]
<div class="col-md-6 col-xl-4"></div>

On the iPad, although it does put the posts in two columns now, there is a missing post on each row - it displays it as 2 posts, then 1, then 2 posts, then 1 etc

Have I done something wrong?

[Luo Yang]

In your case, you just need to use only one "row" HTML div tags, for example, replace the codes you mentioned above as below:

	<div class="row ">
	<wpv-loop>
			<div class="col-md-6 col-xl-4">
				[wpv-post-body view_template="loop-item-in-category-area-page"]
			</div>
	</wpv-loop>
	</div>

And test again

[chantalM]

Thank you Luo.

In Portrait mode it looks great, in Landscape the grid is not stretching to the width of the screen. Is there some code I need to enter somewhere for that? Like width="100" - if so, am not sure where to put it.

[Luo Yang]

Please elaborate the new questions with more details:

in Landscape the grid is not stretching to the width of the screen.

Are we talking about the grid width in mobile device?

[chantalM]

Hi Luo, sorry I am referring to tablet mode.. in portrait it's fine, but in landscape it doesn't fill the screen fully. So it's the grid width in tablet landscape.

[Luo Yang]

I assume we are talking about tablet device, if it is, you need to display the image in full width with custom CSS codes, for example:

img.attachment-400x{
width: 100% !important;
}

See my screenshot tablet.jpg

[chantalM]

Thanks a lot Luo, that did the trick!

Would you mind deleting the screenshot please? Thanks again, for your help.

[Luo Yang]

Screenshot deleted, you are welcome

[chantalM]

My issue is resolved now. Thank you!