Css hide text on phones

All CSS options are described in the FAQ, see “How to style the caption below the images”:

If you want to style the caption below the images, you need to create custom styles for the following CSS classes:

pswp__caption – this class is used for the whole caption area.

pswp__caption__center – this class is used for the caption itself.

pswp__caption__title and pswp__caption__desc – these classes are used, if the caption is divided into a title an description (based on the data-caption-title and data-caption-desc attributes in the image link).

pswp__description – this class is used for the description if this is displayed in addition to the regular caption.

pswp__caption__exif – this class is used for the EXIF data DIV element.

pswp__caption__exif_focal, pswp__caption__exif_fstop, pswp__caption__exif_shutter, pswp__caption__exif_iso, pswp__caption__exif_datetime – these classes are used for the individual properties in the EXIF data.

Thanks again, I shall read the FAQ again.

Oh that works!
I just set the media query at 767 with this .pswp__description{ display: none;} and so the long text is gone. All the description is hidden on phones.

But.

I still need a way to show the hidden text on a phone without the image or to be able to scroll the text. I see you have photo swipe setup so that when the user touches the title – the text goes away. Can I do the opposite? So when a user touches the title the image goes away and the description is then visible?

Could somethng like this work?
https://stackoverflow.com/questions/44688024/is-it-possible-to-modify-href-in-a-stylesheet

Or perhaps you have a better idea?

Or… Perhaps there is a way to add “more…” to any text over a specific length (in mobile view only).

just like there is an option in the foo gallery for the thumbnails. The more… would link to a page with full text.

thanks again.

Yon can create link as part of the description which is normally invisible but only displayed on mobile devices. Something like this:

<span class="desc_desktop">A long description goes hier</span><span class="desc_mobile"><a href="https://example.com/somepage">More...</a></span>

And the CSS for that:

.desc_mobile { display:none; }

@media only screen and (max-width: 767px) {
  .desc_desktop { display:hidden; }
  .desc_mobile { display:inline; }
}

That almost works perfectly. Except; The mobile seems to require

@media only screen and (max-width: 767px) {
  .desc_desktop { display:none; }
  .desc_mobile { display:inline; }
}

However as nice as this is
i cannot ask my client to enter the span code when he is editing his site, for each item. Just showing him how to add items and edit them will be a choir.

Is there a way to fix the image vertically, but make the text slide out of the way, so it is “text swipe” down to view … image swipe across to change images?

So far that is all I can do for your for free.

If you want a specific solution for your client you have to pay for the service to get this implemented.

OK thanks for all your suggestions – I created external pages with links back in. I think we are good for now.