Here our media query will be a little different, only applying to screens (the other queries will affect print layout as well).
@media only screen and (min-width: 320px) and (max-width: 480px) { header{ height: 70px; } #mainNav{ top:70px; width: 220px; } #mainNav li{ float:none; clear:both; } #mainNav li a{ font-size: 100%; padding: 10px } .home article.post h2{ font-size: 120%; margin-bottom: 10px; padding-left: 50px; } .home article.post .entry-content,article.post .entry-meta, article.post a.more{ display:none; } .home article.post a.comments{ position:absolute; margin-top: -55px; } .content.left.two-thirds{ margin-top:150px; } .soc { text-indent: -5000em; } }
We've added some styling to improve the layout on small screens. In particular:
#mainNav
#mainNav
and titles.content
divThe most notable thing that happens is actually handled by default in our layout-core.css
. All left and right floats are turned off, cleared on both sides, and all percentage widths are set to 100%
. This makes every div laid out in our phone view push edge to edge. The result looks like the following screenshot: