Change layout depending on screen orientation
An example showing how to change layout depending on screen orientation using Tizen 2.3. Two column layout for landscape mode and one column layout for portrait mode.
<style>
/* For 768px and below screen widths (portrait) */
body {
margin: 0;
padding: 0;
background-color: lightblue;
display: -webkit-flex;
-webkit-flex-flow: row wrap;
}
section {
width: 100%;
padding: 1em;
box-sizing: border-box;
text-align: justify;
}
/* For above 768px screen widths (landscape) */
@media screen and (min-width: 768px) {
body {
background-color: lightgreen;
}
section {
width: 50%;
}
}
/* 480 x 800 pixels */
</style>
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel cursus dolor. Morbi tincidunt a purus nec facilisis. Curabitur vel ex quis turpis posuere sollicitudin eget at nisi. Curabitur ultricies ultricies arcu, nec finibus tortor lobortis ac. Mauris augue nisi, dapibus eget eros nec, molestie convallis nisi. Aliquam maximus, justo eget faucibus euismod, nisi mauris porta velit, sit amet malesuada arcu sem vitae nunc. Mauris fringilla enim quis aliquam maximus. Vestibulum consectetur eleifend euismod.</section>
<section>Mauris pretium suscipit elit sit amet rhoncus. Maecenas luctus facilisis mauris, vel laoreet elit accumsan a. Cras pretium enim in lorem tristique mollis. Ut sagittis posuere enim, vel cursus ex ullamcorper ac. Donec semper magna dolor, sit amet porta lorem tempus non. Aliquam consequat ipsum dolor, a efficitur ante sollicitudin vestibulum. Duis dignissim ultrices leo.</section>