Remove the space from hidden text in mobile

Hello, 

I'm trying to sort my website out where no images titles and descriptions are showing by using the following Custom CSS;

.image-title {
  visibility: Hidden;}

.image-desc {
  visibility: hidden;}

.image-title-mobile {
  visibility: hidden;}

.image-desc-mobile {
  visibility: hidden;}

However when the site is in mobile view and the thumbnails for the gallery is active there is huge white spaces where the titles and descriptions are. I would like this removing so the images flow into each other with the smallest of gaps. However I do also need these titles and descriptions read for SEO so whatever solution allows this would be great.

www.jayclulow.photography

Any advice greatly appreciated. 

use display: none; instead of visibility: hidden;

Thanks perfect. This worked fine.