Slider height in mobile screen

Hi,

The best way would be to duplicate the slider, then add both to the site. Hide one on mobile and hide the other on desktop. You can use CSS @media queries to hide/show depending on the browser width. If you get started I can help you with the CSS code.

Hi,

Guess the second slider must get another width (less wide) and maybe another height. This is what you mean? This also means I have to crop the current slides to make them look good in the second slider as well.

Guido

Yeah with this approach you can adjust the second slider however you want. Even with different images if that makes more sense.

Understood. Thanks.

Guido

Hi @kbat82,

Thought about it some more, and I can also change height for mobile screen, instead of separate slider:

/* Mobile */
@media screen and (max-width:767px) {
	.metaslider .slides {height:200px;}
	.metaslider .slides .ms-image img {height:200px; object-fit:cover;}
}

How about this?

Guido

@kbat82 Adding 2 slider is right choice?
I mean there will be double load for both mobile and desktop?
Is there any way to do it without CSS hide?

@roadlink THere’s not a beginner friendly way to do this at the moment and would require a significant refactor to add this functionality in natively, unfortunately.

A few other ways would be 1. to fetch the code from the server on demand using a REST call, 2. possibly by disabling cropping (under advanced settings) then manually adjusting the cropped images within WP so that the desired image is at a breakpoint WP serves via srcset, or 3. Use JavaScript to swap the images via an attribute filter.

If you want help with any of those, start your own issue and we can discuss them further.

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