MetaSlider not displaying properly on mobile

Hello,

You can create different versions of the same slider with different styles/configurations, one for each device. Such that, you will have a slider for the desktop and a slider for Mobile.
Then, insert all these versions into the page and show the version of the slider that suits the device that’s navigating the page conditionally.

To do that, please follow these steps:
– Open your slideshow for edit
– Click Add CSS
– Click the link “Hide on the desktop” or “Hide on mobile”
– By clicking these links, a CSS snippet will be added to the CSS editor to hide the slider

Please let me know if this works.
Thanks

To be clear, the responsive Metaslider does not change automatically when the slider appears on different screens, correct?

Hi,

If you disable cropping, the images WP provides will change depending on the screen width. WP handles this though and if you wanted to alter what’s being output you would have to search WP plugins to extend this functionality.

The “easy way” though would to just have two sliders, one for mobile and one for desktop. Then you can size them specifically as you want. It’s a trade off though as you need to manage two sliders. We’re hoping to make this experience better soon, but it may be some time.

Hello,

where in the slideshow editor I can find that “Click Add CSS”, please?

Michal

@michalrydzi “Add CSS” is a pro feature. Ignore that if you’re not using pro.

You can install any CSS plugin and add some code to hide/show page elements based on width of the browser. It would look something like this:

/* Hide on desktop - Display the slideshow on mobile only */
@media (min-width: 768px) {
	#metaslider-id-36 {
		display: none !important;
	}
}
/* Hide on mobile - Display the slideshow on desktop only */
@media (max-width: 767px) {
	#metaslider-id-36 {
		display: none !important;
	}
}

With “36” being replaced by each slideshow.

Thank you very much.

Michal

Added this into the plugin and the whole slideshow disappeared on all devices, any idea how to undo this? ??

@michalrydzi Read each line one by one to see how it works. You have two blocks there and you only need one depending on what you are trying to do.

Yup, desktop is working correctly, but there is still a problem with bad resolution of the slideshow on mobile.

Hi,

@michalrydzi Let me clarify this.

Consider that you have two slideshows (Slideshow1 , Slideshow2). You want to display Slideshow1 only on mobile and display Slideshow2 only on desktop.

Let’s assume that the ID of Slideshow1 is 100 and the ID of Slideshow2 is 101.

The CSS should be like the following:

/* Hide on desktop - Display the slideshow on mobile only */
@media (min-width: 768px) {
	#metaslider-id-100 {
		display: none !important;
	}
}
/* Hide on mobile - Display the slideshow on desktop only */
@media (max-width: 767px) {
	#metaslider-id-101 {
		display: none !important;
	}
}

In the previous CSS, you will need to replace 100 with the ID of your mobile slider and replace 101 with the ID of the desktop slider.

Thanks.

Got it, made two slides, added into code its IDs, desktop is fine, mobile got two slide, both bad resolution

@michalrydzi can you open your own issue?

https://www.ads-software.com/support/plugin/ml-slider#new-post

Sure, sorry.