Browse Source

first steps to responsive design

pull/1/head
Craig Stewart 3 years ago
parent
commit
e2b4aa81d2
  1. 2
      index.html
  2. 47
      styles/default.css

2
index.html

@ -10,7 +10,7 @@ My Website
<body>
<div id="header">
<h1>
New Website
New Website With a Long Header
</h1>
</div>
<div id="navigation">

47
styles/default.css

@ -1,10 +1,10 @@
/*default styles */
html {
height:100%;
width:100%;
}
body {
background-color:#dddd99;
height:100%;
width:100%;
padding:0;
margin:0;
@ -18,19 +18,56 @@ p {
text-align:left;
font-size:18px;
margin:5px;
}
div {
margin:0;
}
#header {
background-color:#aaaaff;
float:none;
}
#navigation {
background-color:#ffaaff;
}
#content {
}
/* small shit */
@media only screen and (max-width: 550px) {
body {
min-height:100%;
height:auto;
position:relative;
}
div {
float:none;
width:100%;
}
#navigation {
position:absolute;
bottom:0;
}
#content {
}
}
/* as stuff gets bigger */
@media only screen and (min-width: 550px) {
body {
height:100%;
}
p {
margin-bottom:15px;
}
div {
float:left;
}
#header {
height:55px;
background-color:#aaaaff;
}
#navigation {
height:calc( 100% - 55px );
width:95px;
float:left;
background-color:#ffaaff;
}
#content {
float:right;
width:calc( 100% - 95px );
}
}

Loading…
Cancel
Save