Last active
December 19, 2015 20:18
-
-
Save kcjonson/6012220 to your computer and use it in GitHub Desktop.
Media Query CSS for Responsive Development Demonstration
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Redfin Basic Responsive Demo - Media Query CSS | |
| Eric Gideon & Kevin Jonson, 2013 | |
| For use with the HTML at https://gist.github.com/kcjonson/6011849 | |
| */ | |
| /* SMALL - nav layout ONLY for screens UNDER 600PX wide */ | |
| @media screen and (max-width: 599px) { | |
| /* This section is setting up the nav. Because we don't use this style anywhere else, | |
| it's wrapped in a max-width to avoid overrides later. The max-width toggles at the | |
| same point as the breakpoint below. -emg | |
| */ | |
| #siteheader { | |
| margin: 0 -1em 1em -1em; | |
| padding: 0.6em 1em; | |
| } | |
| #siteheader h1 { | |
| font-size: 44px; | |
| display: inline-block; | |
| margin: 0; | |
| } | |
| nav#menu { | |
| margin: 0 -1em; | |
| padding: 1em; | |
| min-height: 480px | |
| } | |
| nav#menu a { | |
| display: block; | |
| font-size: 18px; | |
| line-height: 44px; | |
| margin: 0 0 1em 0; | |
| } | |
| footer { | |
| margin: 0 -1em; | |
| } | |
| } | |
| /* MEDIUM - the next size up from small! */ | |
| @media screen and (min-width: 600px) { | |
| /* This changes to a more desktop/tablet-ish layout | |
| when the viewport reaches 600px wide -emg | |
| */ | |
| body { | |
| padding: 0; | |
| max-width: 1200px; | |
| /* Note: this is the same concept as the [min|max]-width we're using in media | |
| queries! This caps the width of the body from this on up. -emg | |
| */ | |
| margin: 0 auto; | |
| } | |
| body > header, | |
| .container { | |
| position:relative; | |
| } | |
| body > header { | |
| box-sizing: border-box; | |
| } | |
| body > header h1 { | |
| display: inline-block; | |
| } | |
| .form { | |
| display: table; | |
| box-sizing: border-box; | |
| } | |
| .form .field { | |
| display: table-row; | |
| } | |
| .form .field label, | |
| .form .field .input { | |
| display: table-cell; | |
| } | |
| .form .field label { | |
| vertical-align: top; | |
| width: 8em; | |
| padding-bottom: 0.5em; | |
| } | |
| nav#menu { | |
| box-sizing: border-box; | |
| position: absolute; | |
| top: -3em; | |
| left: 0; | |
| width: 100%; | |
| padding: 1em; | |
| } | |
| nav.access { | |
| display: none; | |
| } | |
| .content { | |
| box-sizing: border-box; | |
| width: 66.66%; | |
| float: right; | |
| padding: 1em; | |
| overflow: visible; | |
| } | |
| aside.more { | |
| box-sizing: border-box; | |
| width: 33.33%; | |
| float: left; | |
| min-height: 15em; | |
| padding: 1em; | |
| margin: 0; | |
| } | |
| } | |
| /* LARGE - desktop, primarily */ | |
| @media screen and (min-width: 1000px) { | |
| /* This enhances the medium layout for larger screens when the | |
| viewport hits 1000px wide. Note: The medium @media query | |
| continues to take effect as well as the following styles. -KCJ | |
| */ | |
| .content { | |
| overflow: visible; | |
| width: 75%; | |
| } | |
| aside.more { | |
| width: 25%; | |
| } | |
| .form, | |
| .intro { | |
| float: left; | |
| width: 50%; | |
| } | |
| .intro { | |
| box-sizing: border-box; | |
| padding: 0 1em 0 0; | |
| } | |
| .form { | |
| padding: 0 0 0 1em; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment