Search code examples
javascripthtmliosiphoneflipclock

FlipClock iPhone expands numbers inside the flip tabs

I have a FlipClock.js on a page which displays perfectly in all devices and browsers except iPhone.

On an iPhone (4, 4S, 5, 6) it fills the scrolling tabs with the number like the image below.

Has anybody come across this and perhaps can suggest a link to look at. There has been hours of trial an error now with no luck. Thanks!

enter image description here

The relevant HTML for the clock is:

    <div class="up">
      <div class="shadow"></div>
      <div class="inn">9</div>
    </div>
    <div class="down">
      <div class="shadow"></div>
      <div class="inn">9</div>
    </div>

I have targeted the .min class with fixed font sizes, but no difference. It only does this on iPhones but not in the iPhone simulator in Chrome inspect. Thanks for any help!

Solution

  • I solved this problem for myself by changing the font's size after a certain width.

    @media screen and (max-width: 448px) {

	.flip-clock-wrapper ul li a div div.inn {
		font-size: 36px !important;
	}
}