Show different caption on mobile than on desktop

LightHunters

Hi all!

I want to show different captions on mobile than I show on desktop, when in lightbox view.
Currently I have disabled the whole lightbox info for mobile, because I didn´t manage to only hide the captions but show the titles:
@media only screen and (max-device-width: 799px) { .sm-lightbox-info { display: none !important; }

As the html code I have added to the captions doesn´t look good on mobile / takes too much space, I would like to show another caption on mobile.
My initial thought was to add an additional html class with text "Visit the site on desktop to do xyz" to the caption, which will only displayed when the screen size is max 799px.
1) Remove the code above to show title and caption also on mobile
2) Hide the classes I have already added to the caption
3) Create new class with text
4) Hide the new class on desktop, show only on mobile

Will this work? Any thoughts about this? Thanks a lot for your input

light-hunters.com

BR,
Tim

Allen

Edit: Change this to apply to lightbox if needed.

Wrap the two different caption parts in spans.
<span class="noShowMobile">normal caption</span>
<span class="noShowGallery">mobile caption</span>

CSS
.noShowMobile {display:none}
.noShowGallery {display:block}
@media only screen and (max-device-width: 799px) {
.noShowMobile {display:block}
.noShowGallery {display:none}
}

LightHunters

Thanks @Allen , I got it working!

/* Hide desktop caption / buying options on mobile and show text to visit through desktop*/
@media only screen and (max-device-width: 799px) {
.desktop-caption {
display: none;
}
.sm-lightbox-caption:after{
content: "For buying options, please visit this site through your desktop computer."
}
}