[Resolved] Grid Options for Smaller Screen Sizes

[Author]

Posts

[Pete]

Hi there,

On a site we're working on, I was wondering...is it possible to make a 4 column grid only show 3 columns on smaller devices?
And for the same grid to only show 1 row rather than 2 on mobile.

See pic - 4 col grid -
On a smaller screen, this looks squashed. Is there a way of making this show 3 on smaller screens while keeping to just one row?

See pic - iPad view -
On an iPad, is it possible to keep this to only 1 row showing only 2 properties rather than 2 rows showing 4?

This is the page: hidden link

Many thanks. P

[Minesh]

Can you please check now. I've added the following media query CSS to your view's loop editor's CSS box:

@media only screen and (min-width:768px) and (max-width:991px) {
	.new-places-row .col-sm-4:nth-child(n+4) {
  		display: none;
  	}
}

Also, added the class to div as you can see with the screenshot. You can modify it according to your need.

[Pete]

Hey Minesh,

Now I can see what you've done I can play around with this and modify.

One last thing, say I wanted to get rid of another column, so instead of showing 3 as you have now, I only want to show 2?

Many thanks, P

[Minesh]

Yes - you can play around and modify it accordingly as this needs custom CSS and you can adjust accordingly.

One last thing, say I wanted to get rid of another column, so instead of showing 3 as you have now, I only want to show 2?
=> on ipal or what device you are talking about?

[Pete]

Ref:
One last thing, say I wanted to get rid of another column, so instead of showing 3 as you have now, I only want to show 2?

Sometime we may only need 2 so was just wondering what the code would be?

And...
See image attached. For a 12" Notebook of 1024x768 it still shows 4 columns, it's this where we may want to show 3 or even just 2 columns.

[Minesh]

I've chagned the media query as given under and also changed the class to col-lg-3:

@media only screen and (min-width:768px) and (max-width:1199px) {
	.new-places-row .col-sm-4:nth-child(n+4) {
  		display: none;
  	}
}

You may need to add such media query as per your requirement for your required resolutions. Either you paly around it or contact media query CSS expert on this. Thank you for understanding.

[Pete]

Thank you Minesh, works great and I can see what you're suggesting so can modify if need.

Again, thanks for your help 🙂