remove captions on slider when viewed on mobile device

Hi,

If you have only a couple of slideshows you could build a separate mobile version with a shorter description on the caption.

Otherwise you could have two captions inside the slideshow caption field, and hide/show each.

<p class=”mobile-only”>Longer description</p>
<p class=”desktop-only”>Shorter description</p>

Then you need to add those classes to your css somewhere (Pro has an add css module for convenience).

@media (min-width: 800px)
  .mobile-only {
    display: none !important;
  }
}
@media (max-width: 799px)
  .desktop-only {
    display: none !important;
  }
}

Hi,
Thank you for your suggestions.
I added the classes towards the end of my admin/assets/css/admin.css file in the test version of my site. And I manually entered test captions in the slideshow image caption box using the formatting you suggested.

However, when I clear the cache and reload the site I now see BOTH the short and the long caption on BOTH desktop and mobile.

Because the screen sizes seemed to be counter-intuitive, I also tried switching the definitions to:

@media (min-width: 800px)
  .desktop-only {
    display: none !important;
  }
}
@media (max-width: 799px)
  .mobile-only {
    display: none !important;
  }
}

However, I achieved the same results (both captions are present on both desktop and mobile).
What might be wrong?

Hi,

Use my examples but add a { at the end of the like with @media on it.

@media (min-width: 800px) {
  .mobile-only {
    display: none !important;
  }
}
@media (max-width: 799px) {
  .desktop-only {
    display: none !important;
  }
}

Thank you for your help. I updated the code as you suggested, but I’m still seeing both the mobile and the desktop caption on both the desktop and mobile browsers. (even after clearing cache, reloading, etc)

Hi,

I don’t see the CSS added on site. Where did you place it?

I also don’t see where you have updated the captions either.

Also, I see in the captions you are using a <font> element. I’m guessing you just copy/pasted the text from somewhere? You should remove those and use either just plain text, or a <p> or <span> element instead.

More on that: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font

Hello, Thanks for your reply. I have been testing the new code on a test version of the site (it can be viewed using subdomain “test.”) The captions on the live site are gathered from the captions on the images in the WordPress media library. You are correct, they were copy/pasted, and I can work to remove that formatting if it will help.

Hi,

Your class names have extra quotes. See here: https://prnt.sc/t9vp9g

Thank you for spotting that. I’ve fixed it now, but both mobile and desktop captions are still showing on both mobile and desktop browsers

Hi,

Where did you add the CSS? If it’s not working now then it means the CSS isn’t properly being added to the page. I just tested adding it manually in the developer tools and it works.

@media (min-width: 800px) {
  .mobile-only {
    display: none !important;
  }
}
@media (max-width: 799px) {
  .desktop-only {
    display: none !important;
  }
}

I added the CSS using the plugin editor, at the end of my admin/assets/css/admin.css file in the test version of my site. Where did you add the CSS that it worked successfully?
Thanks

Hi,

I added it directly to the Chrome browser dev tools.

admin/assets/css/admin.css

If you added it and it’s not working, you’ll have to add it somewhere else. But looking at the URL I’d assume that file only loads in on the admin page.

If you can’t get it to add, our pro version has a module for this.

Many thanks – I moved the code to assets>metaslider>public.css and now it’s working! ??

Our site is in multiple languages. Would it be possible to use a similar method to detect the language being viewed by the user and show only the caption in the corresponding language? I appreciate any pointers/code you can provide to setup such a system. It will save me from creating and maintaining separate sliders for each language.

Hi,

I don’t think it’s safe to add the code there. If you update the plugin it will be removed.

You could try the :lang CSS selector. I found this just searching Google what you asked so I’m not sure whether it will work or not.

https://css-tricks.com/almanac/selectors/l/lang/

I was wondering about that. I’ve found a different spot to tuck the code in.

I now have the code and slider set up on the home page of my live site. The desktop version is showing the captions, and the mobile version is not. (Exactly as I wanted!) However, on the mobile version, the thin grey strip at the bottom of the image that would display the caption is still showing, it’s just empty. How could I remove that, too?
Many thanks!

Hi,

You would just need to apply the same rules for any styling you want to hide show. The best way is to right click the area you want to inspect (and click inspect), then look on the panel for the styles that are showing. Then override them as needed.

It’s probably “.metaslider .caption-wrap” that you want to create new styles for.