CODEWITHSUNDEEP
htmlcssmobileslider
shommi20
shommi20

Reputation: 33

Responsive CSS image not working on mobile

I'm trying to implement this responsive css image slider, but it doesn't seem to working on mobile devices at all.. Demo review

It works when I visit Codepen page on my phone, but on my url it just hangs on the first image for some reason..(only on mobile, works fine on desktop) And I've tried different browsers on different phones..

Now the code is exactly the same as on codepen, there's no tags clashing or anything like that and it's fairly simple.

Is there something else you need to add to make it mobile friendly? I can't imagine what, because it's just CSS..

So, maybe I need another pair of eyes, but I'm just not getting what could be affecting it??

So here's the code:

HTML

<div id="slider">
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>

CSS

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

Thanks!!

Upvotes: 0

Views: 1376

Answers (1)

MrRO
MrRO

Reputation: 61

Usually in these cases, the culprit is viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

Have you added this, in your webpage?

Upvotes: 1

Related Questions