baker
baker copied to clipboard
Simbul
Adapting Laker HTML / CSS for iPhone 5
I assume many Baker users also use Laker Compendium (with CSS based on Less Framework).
Laker makes the first html div fill the device screen accordingly to its properties which works with all iOS devices but hasn't been done for the iPhone 5 (Retina 4-inch). I tried to poke a bit around the CSS files but haven't exactly done this;
Did anyone adapt Laker's HTML for iPhone 5, how can it be done?
Did you try asking directly the Laker people? You might be able to get a better answer there. :)
Did but came up with not much useful, the community isn't very active there now. :/ Any ideas? :)
Laker uses media queries to fit the first div to the screen. If you have a hunt around in the various CSS files you'll find the dossier-start-bg div being modified for various screen widths & orientations.
I'd add another one after the iPhone media query, with the following criteria:
@media screen and (device-aspect-ratio: 40/71) {}
(cf. http://stackoverflow.com/questions/12539697/iphone-5-css-media-query)
You can then play around with the appropriate heights/widths etc of that div.
@freney thank you!!! got me in the right direction, did it for portrait, but for landscape; I got it to format with
@media screen and (device-aspect-ratio: 40/71) and (orientation:landscape) {
.dossier-start-bg {
width: 568px;
}
}
and while the width works great, a white column is left on the left;
(you can scroll a bit to the right to see it fully;
)
How can we fix this?
Difficult to know, as there's all sorts of stuff that can (and does) interact.
Best way to hack this stuff up is to just load up the HTML file in your browser, and use the inspector to try to find the errand margin or padding that's adding in there. It's the best way as you can modify stuff in the inspector and see the changes in real time.
You can do this with Safari on the iPhone too, using the advanced options and the inspector.
ok, for now, if someone needs it, for portrait add
@media screen and (device-aspect-ratio: 40/71) and (orientation:portrait) {
.dossier-start-bg { height: 448px }
}
to structure.css
by using
@media screen and (device-aspect-ratio: 40/71) and (orientation:landscape) {
.dossier-start-bg {
width: 568px;
}
it gets formatted right but is displayed with a margin/ padding on the left and scrollable that bit didn't really manage to put a finger on it with web console but I'll give it a fresh look soon any ideas?
Yep, I am using Laker on iPhone 5 as is ... it's not that disturbing in my case .. dossier image is just little smaller so I have always my section caption below the dossier image .... but I wouldn't mind having Laker @meda queries corrected to have same look&feel on iPhone 5 as well ... I did send email to Florian (author of Laker Compendium) maybe he has it ... maybe he knows who already did it ... will post here if he replies.
... I had to anyway use media queries at least for the cover page (dossier 0) background image adjustments to have iPads and iPhones 1st picture consistent and not being cut from bottom or right.
