Show different caption on mobile than on desktop

LightHuntersLightHunters Big grinsGermanyPosts: 15Registered Users Big grins
edited May 16, 2017 in SmugMug Customization

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

Comments

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,675Registered Users Major grins
    edited May 16, 2017

    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}
    }

    Al - Just a volunteer here having fun
    My Website | My Blog
  • LightHuntersLightHunters Big grins GermanyPosts: 15Registered Users Big grins
    edited May 16, 2017

    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."
    }
    }

Sign In or Register to comment.