Slides on mobile screens

Hi @mica123. Thanks for using MetaSlider. Can you share a link so we can see this slideshow, please? Often these issues are caused by CSS in the theme.

It may be that the slides are not being showed correctly using the Responsinator website. I’ll have to test it on actual devices.

Thanks.

Sure thing, @mica123. We appreciate you using MetaSlider.

I checked my development site on iPhone 15 and Sony xperia as52. I also checked these particular sizes in Firefox development tools. The slides are being displayed in two but only as a half of each instead of a single full slide. If I push up the slide a bit up, it displays correctly as a single slide. With the Firefox development tool I modified the code as follows:

@media only screen and (min-width: 393px) and (max-width: 425px) {
.metaslider li:before,
.metaslider li:after {
margin: 0 40px 0 0; !important;
}
}

This seems to work, but I haven’t tested it on actual devices. Please let me know if this is feasible. Also, please let me know if I have to put in the entire code or will the above code be sufficient:

@media only screen and (min-width: 393px) and (max-width: 425px) {
.metaslider li:before,
.metaslider li:after {
content: "" !important;
display: none !important;
bottom: auto !important;
margin: 0 40px 0 0; !important;
}
}

• This reply was modified 3 months, 1 week ago by mica123.

Hi @mica123 the first code should work but just to be sure, please use the slideshow ID instead like so:

@media only screen and (min-width: 393px) and (max-width: 425px) {
    #metaslider_SLIDESHOWID li:before,
    #metaslider_SLIDESHOWID li:after {
        margin: 0 40px 0 0; !important;
    }
}

Thank you. I did that with the slideshow ID. But it seems that the code does not really work. What happens is that when I load the page, the first slide is not displayed in full as a single slide – part of it is visible next to the part of the following slide. When I push the first slide up a bit to see the bottom of it as well, it becomes a full slide – and the following slides are also displayed in full correctly as a single slide when I press the arrows on the left or right. Is this how it is supposed to be? I would prefer the first slide to be shown in full as a single slide as users are likely to press the arrows to start with which will not show them the slides correctly. Can you please advise? Thank you.

Hi @mica123 can you please provide a link so we can troubleshoot further? Thanks!

Thanks for getting back to me. My site is in development, so I am not allowed to show it publicly. But I set up a test site where I imported the Metaslider show. It displays exactly the same problem. I would be grateful for your troubleshooting. The link is here.

Hi @mica123,
please try adding this filter in theme’s functions.php file and see if does make a difference:

add_filter( 'metaslider_flex_slider_parameters', 'custom_flex_slider_parameters', 999, 2 );
function custom_flex_slider_parameters( $options, $slider_id )
{
    if ($slider_id == 21) {
        $options['minItems'] = 1;
    }

    return $options;
}

Replace number 21 with the actual slideshow ID.

• This reply was modified 3 months ago by htmgarcia.

Hello @htmgarcia,

Many thanks for getting back to me. I inserted the code on both websites (making sure I put in the correct show ID. I am afraid it didn’t make any difference. I hope you’ll get back to me.

Hi @mica123 can you please try this CSS:

@media only screen and (min-width: 393px) and (max-width: 425px) {
    #metaslider_21.flexslider .slides li {
        margin-right: 14px!important;
        width: 280px!important;
    }
}

I did it, but still no difference. I put in the correct ID on both sites. I also cleared the cache. With the test site, the new CSS code has not shown up yet, but it did on the development site and it is still showing in halves. Do I leave the code you gave me before in functions.php?

Thanks @mica123 you can try removing the code on functions.php. I’ll wait for the CSS on the dev site to show up on my end.

I removed the code from functions.php. It made no difference. I also removed from CSS:

width: 280px!important;

But it didn’t make a difference either. So I put it back. This is really strange.

Can you please check on the test site again? I can see the CSS and it looks good on my end. To make the margin work, please add another selector:

#metaslider-id-21 #metaslider_21.flexslider .slides li {
	margin-right: 14px !important;
	width: 280px !important;
}