Show horizontal in mobile and vertical on desktop and tablet

Anonymous

#274242

Hi,

The search and filter is visible on my website at http://www.legendary-models.com/shop.

I want to make it so on mobile the filters display horizontally and on tablets and desktops – vertically in side bar (as it is at the moment)

I was thinking to create 2 search and filter forms, but how would i hide one on mobile and show…vice versa.

I am using wordpress/elementor.

Please advise,
Thanks

Ross Moderator

#274259

Hi Robert

You can add the following CSS:

/* default is vertical */
@media only screen and (min-width: 600px) {

	/* make horizontal */
	.searchandfilter > ul > li {
		display: inline-block;
		vertical-align: top;
		padding: 0 20px;
	}
}

This means by default the form is vertical.
Then, any screen size over 600px width, will have the extra CSS applied, which makes it horizontal.

I didn’t test it but it should work!

Let me know how you get on.

Best

[Author]

Posts