3.  Media Queries  CSS3 Grid  CSS3 Flexbox  CSS3 Multi-column  Recommendations  Resources

5. <style type="text/css"> @media (orientation: landscape) { body { background-color: Green} #landscape {display: block} #portrait {display: none} } @media (orientation: portrait) { body { background-color: Maroon} #landscape {display: none} #portrait {display: block} } </style> <div id="landscape">Detected mode: landscape</div> <div id="portrait"> Detected mode: portrait</div>

8. 12 3 2 3 1

9. Growth #mainContainer { display: -ms-grid; -ms-grid-columns: 1fr 6fr 130px; } #banner { -ms-grid-column: 1; -ms-grid-column-span: 3; } #toc { -ms-grid-column: 1; -ms-grid-row: 2; } #textArea { -ms-grid-column: 2; -ms-grid-row: 2; } #images { -ms-grid-column: 3; -ms-grid-row: 2; -ms-grid-row-span: 2; } #footer { -ms-grid-column: 1; -ms-grid-column-span: 2; -ms-grid-row: 3; } Growth textArea toc footer images banner

10. #mainContainer { display: -ms-grid; -ms-grid-columns: 1fr 6fr 130px; } textArea toc images 130px Left over space 1 fraction 6 fractions

13. Back Play Forward #playControl { display: -ms-box; -ms-box-orient: horizontal; -ms-box-align: middle; } button { -ms-box-flex: 1; }

14. Back Play Forward #playControl { display: -ms-box; -ms-box-orient: horizontal; /* alignment perpendicular to the axis defined by the -ms-box-orient property) */ -ms-box-align: middle; /*excess space distribution along the axis defined by the -ms-box-orient property) */ -ms-box-pack: center; }

15. @media all and (min-width: 300px) and (max-width: 400px) { #playControl { -ms-box-orient: vertical; /*excess space distribution along the axis defined by the -ms-box-orient property) */ -ms-box-pack: center; }

16. @media all and (max-width: 299px) { #playControl { -ms-box-orient: vertical; } #playButton { -ms-box-flex: 10; -ms-box-ordinal-group: 1; } #backButton { -ms-box-ordinal-group: 2; } #fwdButton { -ms-box-ordinal-group: 2; }

20. div { column-width: 12em; column-rule: thin solid black; column-gap: 2em; } … … 12em 2em