Show different caption on mobile than on desktop
LightHunters
Registered Users Posts: 15 Big grins
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 
BR,
Tim
Comments
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}
}
My Website index | My Blog
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."
}
}