Some breakpoints using class are not hidden

[mark2inspect]

I created a special page with a searchable directory. Because we needed to use a js script on the page, and I could not get the js to work inside of cornerstone. So we coded the page using HTML and are using div classes to hide certain elements in the tablet view and the mobile view. The problem is it works perfectly in the mobile view, but in the tablet view, both lists which are generated by two search elements that are displayed. Any assistance is much appreciated.

The page with the issue is: https://stlashi.org/service-area-search/

Here is the code I am using:

 <div class="x-hide-m">
<h4>ASHI Certified Inspectors (ACI):</h4>
<p>[wppb-list-users name="service-area-search-ci"]</p>
<h4>ASHI Inspectors:</h4>
<p>[wppb-list-users name="service-area-search-i"]</p>
</div>
<div class="x-hide-xs x-hide-sm">
<h4>ASHI Certified Inspectors (ACI):</h4>
<p>[wppb-list-users name="service-area-search-ci-tablet"]</p>
<h4>ASHI Inspectors:</h4>
<p>[wppb-list-users name="service-area-search-i-tablet"]</p>
</div>

This is what I see on tablet vs on a moble device only one set is visible.

[paul.r]

Hi @mark2inspect,

Please note there is no x-hide-m class, only x-hide-md

Change your x-hide-m class to x-hide-md and test again.

Here are the available class and the respective breakpoints

x-hide-xl = 1200px and up
x-hide-lg = 980px – 1199px
x-hide-md = 768px – 979px
x-hide-sm = 481px – 767px
x-hide-xs = 480px & Smaller

You can also create your own class with custom breakpoints using @media queries.

Please refer to the link below for your guide

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Media Queries for Standard Devices | CSS-Tricks

Thanks