Both mobile and tablet/desktop elements are hidden at 767px using Hide During Breakpoints settings

[brendanlayton]

I have a section with two rows. Using the “Hide During Breakpoints” settings one row is set to be hidden from 767px down, i.e. the first two device icons are activated. The second row is set to be hidden on devices 767px and above, i.e. the three last device icons are activated.

The resulting CSS is as follows:

@media (max-width: 767px) {
.row-1.x-hide-sm {
display: none;
}
}

@media (min-width: 767px) and (max-width: 978px) {
.row-2.x-hide-md {
display: none !important;
}
}

The above CSS results in both rows being hidden at 767px. Is this a bug or am I missing something?

Cheers.
Brendan

[prakash_s]

Hello Brendan,

Thanks for writing to us.

To help you with your concerns, we need to check your settings, I would request you please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[ruenel]

Hello Brendan,

The resulting CSS is working as expected. When the maximum width is 767 pixels, the Row 1 element will be hidden. At the same time, Row 2 element will not display because the minimum width is 767 pixels. As soon as the width gets to 768 pixels, Row 2 will be displayed.

I would recommend having your settings be like this:

When hidding from 767px and below:

When hidding from 767px and above

For more reference, please check this: https://theme.co/docs/responsive-styling

Hope this helps.

[brendanlayton]

That’s how I have the settings but it means at exactly 767px neither row is displayed. I’d assume that’s a bug rather than how it’s supposed to work?

[ruenel]

Hello Brendan,

Please check out this video demo:
https://www.youtube.com/watch?v=9p05EKMddKw

It shows Column 1 and Column 2 hidden/shown on different screen sizes.

Thanks.