Essential grid filter menu sizes on mobile

[tipul01]

Hello,

Is there any way to make the essential grid filter menu adjustable on screen size? Right now, on the desktop its ok, but on mobile, all the 5 filters bunch up together with no spacing between and seem very ugly. Maybe the font size as well to scale down with the screensize?

Also, i do not see in the skin editor a function that the title items to scale down on with the screen size:frowning:

www.digitalcube.ro/work

Thank you!

[christian]

Hey @tipul01,

Regretfully, the Essential Grid plugin does not have an adjustable filter display and font scaling feature.

I checked the filter and they do have space between them though.

For your titles, you can target them and use this method of responsive text. I haven’t tried that in your site because there’s something blocking the developer tools.

Thanks.

[tipul01]

Hello,

Thank you!

I should write that code in the skin editor or how to target them?

Also, if i change the essential grid to TheGrid plugin, would that be of any help with the filtering menus?

Thank you!

[christian]

I checked The Grid and there’s no responsive text and responsive style for the filter either.

To target an element in a web page, you need to inspect it. Here’s a guide. You will then add your CSS in the skin editor.

Thanks.

[tipul01]

Hello,

I tried inserting the code

body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

in the skin editor but it does not do anything. Maybe i inserted the code in a wrong place?

Thank you

[thai]

Hi There,

Please try with this CSS instead:

.flat-light .esg-filterbutton {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Let us know how it goes!