Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Add media queries to sample layout CSS #404

Closed
wants to merge 1 commit into from

2 participants

Sean Davis Ian Stewart
Sean Davis

The sample layouts only do half of the job. The menu toggle media query
in style.css implies that _s is responsive ready. Adding sample layout
min-width media queries to match the menu media query keeps things
unified and provides completed sample layout CSS.

Sean Davis sdavis2702 Add media queries to sample layout CSS
The sample layouts only do half of the job. The menu toggle media query
in style.css implies that _s is responsive ready. Adding sample layout
min-width media queries to match the menu media query keeps things
unified and provides completed sample layout CSS.
accea5d
Ian Stewart
Owner

Great idea. It's something we'll likely look at in the near future though with a maybe-more-robust solution.

Ian Stewart ianstewart closed this
Sean Davis

Yea I saw your comment about a Sass-based _s shortly after making this request. Good stuff! Can't wait to see what you guys come up with.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 10, 2014
  1. Sean Davis

    Add media queries to sample layout CSS

    sdavis2702 authored
    The sample layouts only do half of the job. The menu toggle media query
    in style.css implies that _s is responsive ready. Adding sample layout
    min-width media queries to match the menu media query keeps things
    unified and provides completed sample layout CSS.
This page is out of date. Refresh to see the latest.
Showing with 36 additions and 32 deletions.
  1. +18 −16 layouts/content-sidebar.css
  2. +18 −16 layouts/sidebar-content.css
34 layouts/content-sidebar.css
View
@@ -3,20 +3,22 @@ Theme Name: _s
Layout: Content-Sidebar
*/
-.content-area {
- float: left;
- margin: 0 -25% 0 0;
- width: 100%;
-}
-.site-main {
- margin: 0 25% 0 0;
-}
-.site-content .widget-area {
- float: right;
- overflow: hidden;
- width: 25%;
-}
-.site-footer {
- clear: both;
- width: 100%;
+@media screen and (min-width: 600px) {
+ .content-area {
+ float: left;
+ margin: 0 -25% 0 0;
+ width: 100%;
+ }
+ .site-main {
+ margin: 0 25% 0 0;
+ }
+ .site-content .widget-area {
+ float: right;
+ overflow: hidden;
+ width: 25%;
+ }
+ .site-footer {
+ clear: both;
+ width: 100%;
+ }
}
34 layouts/sidebar-content.css
View
@@ -3,20 +3,22 @@ Theme Name: _s
Layout: Sidebar-Content
*/
-.content-area {
- float: right;
- margin: 0 0 0 -25%;
- width: 100%;
-}
-.site-main {
- margin: 0 0 0 25%;
-}
-.site-content .widget-area {
- float: left;
- overflow: hidden;
- width: 25%;
-}
-.site-footer {
- clear: both;
- width: 100%;
+@media screen and (min-width: 600px) {
+ .content-area {
+ float: right;
+ margin: 0 0 0 -25%;
+ width: 100%;
+ }
+ .site-main {
+ margin: 0 0 0 25%;
+ }
+ .site-content .widget-area {
+ float: left;
+ overflow: hidden;
+ width: 25%;
+ }
+ .site-footer {
+ clear: both;
+ width: 100%;
+ }
}
Something went wrong with that request. Please try again.