How to hide a row on mobile devices?

Entrada WP Theme
#1

Hello Sanjeev,

I’m trying to hide a row on mobile devices because the effect doesn’t work with touch, it needs the click. I tried with the WP Bakery settings but they hided the row completely from everywhere.

I tried adding a CSS extra class .tester-1 and adding inside the CSS page pannel

@media screen and (max-width: 720px)
{
#tester-1 { display: none }
}

but nothing happened.

Then of course I have another row that I want to show just on mobile devices.

Can you please help me with this responsive issue?

Thanks a lot,
Simona

PS. I will join a Beginner Coding course next mouth so I hope to be soon able to solve these issues by myself soon :wink:

#2

Hello Simona,

The CSS you have, should actually be:

@media screen and (max-width: 720px) {
#tester-1 {
display: none;
}
}
yours is missing the ; after display: none

for it to work.

And - if you use media query to target mobile like above, then those will not display on mobile, you can use “min-width: 720px” instead of max - to reverse it for other rows you have indicated.

Thank you

#3

Thank you Sanjeev,

great help as usual.

Cheers