Gallery Hover displaying caption on mobile - Help to disable!

Hello, 

I am trying to disable gallery captions from appearing on the mobile site. This is the code I used for the main site: 

 

Quote

/* gallery Hover effect */

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
  position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
    font-size: 30px !important;
    color: #FFFFFF;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #000000; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
@media only screen and (min-width: 768px) {
  .gallery-masonry-item .gallery-caption-content {
    visibility: hidden;
  }
  .gallery-masonry-item:hover .gallery-caption-content {
    visibility: visible;
  }
}
/* gallery Hover effect */

figure.gallery-strips-item {
    position: relative;
}
.gallery-caption {
  position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-strips-item:hover .gallery-caption-content {
    opacity: 1 !important;
    font-size: 30px !important;
    color: #FFFFFF;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
    background: #000000; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
@media only screen and (min-width: 768px) {
  .gallery-strips-item .gallery-caption-content {
    visibility: hidden;
  }
  .gallery-strips-item:hover .gallery-caption-content {
    visibility: visible;
  }
  
}
@media screen and (max-width:800px) {
.gallery-strips-item .gallery-caption-content {
    display: none !important;
}
}

I realize I may have duplicated the code, but I can't remember anymore so if the duplicate is unnecessary, please let me know. 
But in essence the page is performing fine on desktop view, but the mobile view the caption is always appearing and covering the image:

desktop (I am hovering over "cafe haroun")
 

(mobile, not hovering, and captions always appearing)

Please help 🙂

Can you share link to page?

For those having a similar problem, I've fixed it by adding the little snippet of code at the top: 

 

Quote

/* Disable gallery captions on mobile */
@media screen and (max-width: 767px) {
  .gallery-caption-content {
    display: none !important;
  }
}

/* Hover effect for desktop */

/* gallery Hover effect */

@media screen and (max-width:800px) {
.gallery-image-mobile, .gallery-desc-mobile {
    display: none !important;
}
}
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
  position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
    font-size: 30px !important;
    color: #FFFFFF;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #000000; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
@media only screen and (min-width: 768px) {
  .gallery-masonry-item .gallery-caption-content {
    visibility: hidden;
  }
  .gallery-masonry-item:hover .gallery-caption-content {
    visibility: visible;
  }
}