Slides on mobile screens

I put this in both sites. There is no difference. You say it looks good on your end? I am checking it on my iPhone SE 2020 – its screen width is 375px. I am also checking it in Firefox dev tools on my desktop in Responsive Design Mode. The result is the same as I described before: when the page comes up, it does not show a single slide, and the following slides are shown partially next to each other. How are you checking it on your end?

I should add (as I wrote before) that when I push the initial slide up a bit on my mobile, everything is then displayed normally – each slide in full. But this should happen from the first go. Users are likely to click on arrows first – which will not result in each slide in full.

I very much appreciate your support. I hope you will get back to me. Many thanks.

Hi @mica123. Thanks for using MetaSlider. From Monday to Friday we try and answer the support questions for Free users as quickly as we can. At this late point on Friday, it might be Monday before our developers can reply again.

Many thanks for your understanding and support. Just to let you know that I am still trying various variables, but so far no success. Will wait to hear from developers.

Hello all,

I had another look at your suggested codes to see what I could do. To save you time digging into this issue I thought I should let you know as soon as possible: I noticed that there was a typing error in the code

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

I should have been:

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

There should have been a hyphen instead of underscore. There was an underscore in a previously suggested code as well. I copied it and pasted it into my stylesheet – and so it didn’t work.

I experimented with this code and this one seems to work up to a point:

@media only screen and (min-width: 375px) and (max-width: 428px) {
    #metaslider-id-21 .slides li {
	margin-right: 14px !important;
	width: 244.2px !important;
}
}

I tried your suggested width of 280px, but it didn’t work. This one above works for iPhone with 375px – although the subsequent slides do not show the left border. However, in my browser’s dev tools this code doesn’t seem to work for mobiles with screens above 375px. I put the code into the test site – but it is not showing up for me here. It is showing up for me on the develment site where it works up to a point as described above. I will have a chance to test this code on iPhone 12 Pro Max and will get back to you (but I don’t think it will work there). By the way, I had to delete #metaslider-21.flexslider selector from the code because it didn’t work.

I should add that I have my test site only for 7 days – today is day 4, it will go offline on day 7.

• This reply was modified 1 month, 4 weeks ago by mica123.

Hello all,

just to let you know that the code didn’t work on iPhone 12 Pro Max (with a bigger screen) as expected.

As for underscores and hyphens in the codes, I am rather confused when they can be used. I assume it was not a typing error when I copied your codes, as I wrote earlier. In any case, I very much hope you’ll be able to help me. I would have thought that the slides would adapt to various screen size widths without specifying their exact width. Many thanks for your understanding and patience.

Hi @mica123 since the previous suggested solutions didn’t work on your end. Would you be open to create two separate slideshows for desktop and mobile? Carousel slideshows are intended to show multiple slides at once hence it’s tricky to modify its CSS. A solution would be have one slideshow for desktop and tablets – carousel mode enabled. And one for mobile with carousel disabled. And then hide slideshows on mobile/desktop respectively like:

/* Hide the slideshow on mobile */
@media (max-width: 768px) {
	#metaslider-id-SLIDESHOWIDHERE {
		display: none !important;
	}
}
/* Hide the slideshow on laptop */
@media (min-width: 1121px) and (max-width: 1199px) {
	#metaslider-id-SLIDESHOWIDHERE {
		display: none !important;
	}
}
/* Hide the slideshow on desktop */
@media (min-width: 1200px) {
	#metaslider-id-SLIDESHOWIDHERE {
		display: none !important;
	}
}

Let us know what you think. Thanks!

Thank you very much for getting back to me. I have decided to use the Touch Swipe option for mobile devices. It works – at least the user can move the slides intuitively to get a better view. Once he/she does that, then each slide is displayed in full, including the borders on the right and left. You can check on my test site where I enabled it too.

Your suggested solution would probably be not straightforward as there could still be problems of compatibility with various screen sizes.

I would still prefer the arrows on smaller screens. If you can still think of something for me to try, I would appreciate it – in theory they should work on smaller screens as well without impacting the slides.

Thanks again for your help and patience.

P.S. I forgot to say that I tested it on my iPhone SE 2020, it works there. I’ll test it on iPhone 12 tomorrow.

• This reply was modified 1 month, 3 weeks ago by mica123.
• This reply was modified 1 month, 3 weeks ago by mica123.

That’s good to hear, thanks @mica123. I think the best resolution here will be separate slideshows for different screen sizes, given the different features you need between the slideshows.

Thanks @stevejburge. But I am a little confused. I am not sure what you mean by “given the different features you need between the slideshows”? Perhaps I was not clear what I was after. I don’t need different features between the slideshows. Unless you meant that I was not able to display each slide in full on mobile devices?

Hi @mica123 instead of a CSS solution, can you please try adding this code to your theme’s functions.php: https://gist.github.com/rochdesigns/7a927a5f5821e86795394fbb9e3da443 you’ll need to change the slideshow ID to yours. I added a comment on where you should change it.

Please let us know how it goes. Thanks!

• This reply was modified 1 month, 3 weeks ago by rochdesigns.

Hello @rochdesigns,

Many thanks for your help. I tried it, but I am afraid it didn’t work—the slides are not displayed in full with arrows, both on development and test sites. You can see it on this test side, which is still up but expiring soon here. I did put in the correct slideshow ID.

I very much appreciate your help.

Can you please try changing the width to 277px? Thanks!

Sorry, where do I change the width? And do I keep the function?

• This reply was modified 1 month, 3 weeks ago by mica123.