Why when I disable fancybox in some section, it is disabled for the whole site?

Question

css

Here is the html

<div class="prices-details">
  <div class="container">
    <?php while ( have_rows('prices') ) : the_row(); ?>
    <div class="card" data-fancybox data-options='{"src": "#exampleModal", "touch": false, "smallBtn" : false}' href="javascript:;"> </div>
        </div>
   </div>

<---    Второй код, который я не хочу отключать

<a href="https://hutsonr.ru/wp-content/uploads/2019/12/g1unE6n4lYo.jpg" data-fancybox="images">
  <img src="https://hutsonr.ru/wp-content/uploads/2019/12/g1unE6n4lYo.jpg" alt="image" />
</a>

.prices-details .fancybox-container,.fancybox-show-toolbar,.fancybox-is-open {
    display: none;
  }

So I turn off the visibility of fancybox only for the card, but for some reason it turns off for the second code with the image. How to disable fancybox only in the first case.
PS I want to disable for the first case on required permission (for phone). (Might help somehow)

Answer 1

.fancybox-is-open {
    display: none;
 }

You turn it off everywhere.
Maybe it's easier not to connect it to mobile phones at all?
How to use javascript to determine the device from which you entered the site?