The Grid Plugin: Customizing the dimensions and visibility of filters and search bar

Support
#1

Hello!

I am using The Grid plugin, and I have a problem with a grid, on mobile devices all the filters and the search bar looks so messy. I was looking for an option in the plugin but nothing works. I think there should be a way with CSS but i am a beginner at coding.

Is there a way to change the width of the filters and search bar of a grid in mobile devices?
or, is there a way to hide them in mobile devices?

Thank you for your help.

#2

Hey Federico,

Thanks for writing in! The only way you can style the filter and the search bar is by using a custom css. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

#3

Thank you, I have just post it as a secure note.

#4

Hello Federico,

Thanks for providing the url of the page. Instead of using the shortcode inside the text element, please remove the text element and then use the Classic The Grid element.

And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)



@media(max-width:767px){
    body #grid-1920 .tg-grid-area-top1,
    body #grid-1920 .tg-grid-area-top2 {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }


    .tg-grid-wrapper.tg-grid-loaded .tg-dropdown-holder {
        width: 180px;
    }

    .tg-grid-wrapper.tg-grid-loaded .tg-filters-holder {
        margin-left: auto;
        margin-right: auto;
    }
}

We would love to know if this has worked for you. Thank you.

1 Like
#5

Works great! Thank you very much!.

Is there a way to hide the filters, if I eventually want it?

#6

Hey Federico,

If you want to hide the filters, you can update the code using this:

@media(max-width:767px){
    body #grid-1920 .tg-grid-area-top1,
    body #grid-1920 .tg-grid-area-top2 {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    body #grid-1920 .tg-grid-area-top2 {
       display: none;
    }


    .tg-grid-wrapper.tg-grid-loaded .tg-dropdown-holder {
        width: 180px;
    }

    .tg-grid-wrapper.tg-grid-loaded .tg-filters-holder {
        margin-left: auto;
        margin-right: auto;
    }
}

Cheers.

1 Like
#7

Perfect! Thank you!.

#8

You are most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.