mobile styling for iOS

[JoeGermuska]

using this URL http://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI&font=Default&lang=en&height=650

gets this in the iOS simulator on initial load

[zachwise]

This is the byproduct of the change we made yesterday to fix the font issue.

[luokebi]

I wonder wether it is because IOS safari doesn't support flex-direction, should use -webkit-flex-direction.

[zachwise]

Seems to be fine:
iOS Chrome:

iOS Safari:

[espressodaily]

still having problem with embed code.
I created a timeline and tried it out using the link preview and it works fine. It also works fine on iPhone and iPad.
I then used the embed code on my page but the result is no longer responsive on mobile devices. I gather I need supporting code in the hosting page

Google Spreadsheet
https://docs.google.com/spreadsheets/d/1YPZU7RylFPvky0k2KXOEaBILWyxjPmKJXBeAL3EeN2k/edit#gid=0

Attached screenshots. I used google chrome developer tools to show you as it works the same on actual device.

LINK PREVIEW FROM YOUR SITE
http://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1YPZU7RylFPvky0k2KXOEaBILWyxjPmKJXBeAL3EeN2k&font=Default&lang=en&height=650

LINK TO MY SITE
http://sdo-demo-main-14e989d9b88.force.com/ignite/kufnerignites

[zachwise]

@espressodaily you need to set the embed to 100% and adjust your own css appropriately.

[zachwise]

@espressodaily you should probably set the viewport also:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

[espressodaily]

Thanks.
Can you provide proper style code so I can insert?

[zachwise]

@espressodaily just take a look at any of our example pages https://github.com/NUKnightLab/TimelineJS3/tree/master/compiled/examples

html, body {
        height:100%;
        width:100%;
        padding: 0px;
        margin: 0px;
      }

[espressodaily]

Thanks. I have that. Is there other code I should be using to properly handle iOS devices? Sorry, not really much experience with responsive sites.

[espressodaily]

that styling alone doesn't make a difference.

[luokebi]

@zachwise I think the mobile style doesn't look good. The portrait style on mobile seems to be better.

[hbillings]

On my 5S and my iOS simulator, this is how the mobile styles look:

Not sure if that layout is supposed to be that way, or if the arrows are supposed to disappear. Either way, the headlines definitely need help. (Related: #78)

[zachwise]

The side by side layout is the result of flex styles on mobile safari not being obeyed. It will be fixed soon

[hbillings]

Awesome, thanks. (Also rendering that way on mobile Chrome, though I'm using an old version. I'll try updating and see what happens.)

[zachwise]

Chrome uses safari rendering.

[hbillings]

Ah, it's a mobile webkit issue. Gotcha.

[espressodaily]

So the embed code won't work properly on it's own on a mobile device?
Can you guys give me the styling I should use on the embedding site for this to work?
I tried zachwise suggestion and it did nothing.

html, body {
height:100%;
width:100%;
padding: 0px;
margin: 0px;
}

[espressodaily]

@zachwise just to be clear. it looks fine on your linkpreview with URL to http://cdn.knightlab.com/....
but still not when I embed on my site. I understand that I may need to add more style to support - just want to make sure you know what I see.

[hbillings]

@espressodaily Make sure your iframe uses width="100%". If that doesn't do it, please post to our help forum at https://knightlab.zendesk.com/ instead of here on GitHub (which we use mostly for bug tracking). Thanks!