Show horizontal in mobile and vertical on desktop and tablet

Forums › Forums › Search & Filter Pro › Show horizontal in mobile and vertical on desktop and tablet

Viewing 2 posts – 1 through 2 (of 2 total)
  • 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

Viewing 2 posts – 1 through 2 (of 2 total)

Search & Filter Support
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

We also use cookies to store items in your cart as well as allowing your to login on the site.

You can adjust all of your cookie settings by navigating the tabs on the left hand side.

By continuing to use this site, you also agree to our Privacy Policy.