Permalink
Browse files

Made design responsive

Resizes to fit on mobile and tablet screens better
  • Loading branch information...
1 parent bdeb254 commit f67c0ad1c6d56ff5239a0318b99f85d56e8c242b @andrew andrew committed Feb 24, 2013
Showing with 19 additions and 1 deletion.
  1. +2 −0 _layouts/default.html
  2. +17 −1 css/style.css
View
@@ -10,9 +10,11 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="/js/guides.js"></script>
<link href="/css/bootstrap.css" rel="stylesheet" />
+ <link href="/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="/css/code.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet" />
<link href="/favicon.png" rel="shortcut icon" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
View
@@ -4,7 +4,6 @@ html {
body {
margin: 0px;
- padding: 0px;
background: #fff;
color: #333;
text-rendering: optimizeLegibility;
@@ -245,3 +244,20 @@ i.icon-small-prompt{
i.icon-small-browser {
background-image: url("/images/icon-small-browser.png");
}
+/* Correct padding on smaller screens */
+@media (max-width: 767px) {
+ header, footer{
+ margin-left:-20px;
+ margin-right:-20px;
+ padding-left:20px;
+ padding-right:20px;
+ }
+}
+
+/* Don't show the homepage image on mobile */
+@media (max-width: 480px) {
+ .hero {
+ padding: 20px 0;
+ background:none;
+ }
+}

0 comments on commit f67c0ad

Please sign in to comment.