Browse Source

fix responsive design for big screens

pull/1/head
Craig Stewart 3 years ago
parent
commit
618675c14f
  1. 2
      about.html
  2. 2
      contact.html
  3. 2
      index.html
  4. 21
      styles/default.css

2
about.html

@ -8,6 +8,7 @@ About Me
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>
About Me
@ -59,5 +60,6 @@ I like to think I am a reasonably moral person, but I do have failings, and I ca
</p>
</div>
</div>
</div>
</body>
</html>

2
contact.html

@ -8,6 +8,7 @@ Contact Me
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>
Contact Me
@ -53,5 +54,6 @@ Or if that fails I can be contacted <a href="mailto:server@craig-james-stewart.c
</p>
</div>
</div>
</div>
</body>
</html>

2
index.html

@ -8,6 +8,7 @@ My Website
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>
New Website
@ -50,5 +51,6 @@ I'm going to be working on the design of this on and off for a while, and even w
</p>
</div>
</div>
</div>
</body>
</html>

21
styles/default.css

@ -4,7 +4,7 @@ html {
width:100%;
}
body {
background-color:#dddd99;
background-color:#999999;
width:100%;
padding:0;
margin:0;
@ -22,6 +22,9 @@ p {
div {
margin:0;
}
#wrapper {
background-color:#dddd99;
}
#header {
background-color:#aaaaff;
float:none;
@ -45,6 +48,10 @@ div {
float:none;
width:100%;
}
#wrapper {
min-height:calc( 100vh - 46px);
height:100%;
}
#navigation {
position:absolute;
height:46px;
@ -62,9 +69,11 @@ p {
margin-bottom:15px;
}
div {
#float:left;
display:table-cell;
}
#wrapper {
height:100vh;
}
#header {
height:55px;
display:block;
@ -80,3 +89,11 @@ div {
width:calc( 100% - 95px );
}
}
/* as stuff gets really big */
@media only screen and (min-width: 1200px) {
#wrapper {
width:1000px;
margin:auto;
display:table;
}
}

Loading…
Cancel
Save