I have a simple CSS to emulate iBook-lile layout:
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
padding: 2em;
font-family: 'Gentium Basic', serif;
column-count: 2;
column-gap: 4em;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Unica One', cursive;
text-align: center;
}
.title-display {
margin-bottom: 6em;
}
p {
text-indent: 2em;
}
I need to create a layout with horizontal scrolling only. So if column-count is 2 or bigger - everything looks fine.
The page scrolling only horizontaly, and I could scroll my layout with JavaScript.
The example is here: http://codepen.io/fredy26/pen/QjgZEP
BUT! If i trying to change the amount of columns to 1, by setting column-count: 1; everything breaks. All text is placed inside one column with vertical scrolling. To compare, Chrome is working fine.