Skip to content

Instantly share code, notes, and snippets.

@billerickson
Created November 4, 2011 17:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save billerickson/1339924 to your computer and use it in GitHub Desktop.
Save billerickson/1339924 to your computer and use it in GitHub Desktop.
Make the Genesis stylesheet responsive
Index: style.css
===================================================================
--- style.css (revision 390)
+++ style.css (working copy)
@@ -64,6 +64,7 @@
* Footer
* Comments
* Gravity Forms
+* Mobile
*/
@@ -1584,4 +1585,97 @@
border: none;
margin: 0;
padding: 0;
+}
+
+
+/* Mobile
+------------------------------------------------------------ */
+
+@media only screen and (max-width: 960px) {
+
+ #header, #inner, #footer-widgets, #footer {
+ width: 90%;
+ margin: 0;
+ padding: 10px 5%;
+ }
+
+ #wrap, .wrap, #nav, #subnav, #header .widget-area, #header .widget-area ul {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ }
+
+ #header, #inner, #wrap, .wrap, #nav, #subnav, #footer-widgets, #footer {
+ border-left-width: 0;
+ border-right-width: 0;
+ }
+
+ #content-sidebar-wrap {
+ float: left;
+ width: 82%;
+ }
+
+ .content-sidebar #content-sidebar-wrap,
+ .full-width-content #content-sidebar-wrap,
+ .sidebar-content #content-sidebar-wrap {
+ width: 100%;
+ }
+
+ .content-sidebar #content,
+ .sidebar-content #content,
+ .content-sidebar-sidebar #content,
+ .sidebar-content-sidebar #content,
+ .sidebar-sidebar-content #content {
+ width: 59.49%;
+ }
+
+ .full-width-content #content {
+ width: 100%;
+ }
+
+ .sidebar {
+ width: 37.97%;
+ }
+
+ #sidebar-alt {
+ width: 15.625%;
+ }
+
+ #footer .gototop,
+ #footer .creds {
+ width: 90%;
+ margin: 0;
+ padding: 0 5%;
+ text-align: center;
+ }
+
+}
+
+@media only screen and (max-width: 768px) {
+
+ .content-sidebar-sidebar #content-sidebar-wrap,
+ .sidebar-content-sidebar #content-sidebar-wrap,
+ .sidebar-sidebar-content #content-sidebar-wrap,
+ .content-sidebar-sidebar #content,
+ .sidebar-content-sidebar #content,
+ .sidebar-sidebar-content #content,
+ .content-sidebar-sidebar .sidebar,
+ .sidebar-content-sidebar .sidebar,
+ .sidebar-sidebar-content .sidebar,
+ .content-sidebar-sidebar #sidebar-alt,
+ .sidebar-content-sidebar #sidebar-alt,
+ .sidebar-sidebar-content #sidebar-alt {
+ width: 100%;
+ }
+
+}
+
+@media only screen and (max-width: 480px) {
+
+ .content-sidebar #content,
+ .sidebar-content #content,
+ .content-sidebar #sidebar,
+ .sidebar-content #sidebar {
+ width: 100%;
+ }
}
\ No newline at end of file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment