Hi,
Here’s a quick revision to handle media queries for smaller widths. You will need to tweak it if the size of your custom fonts causes overlaps but that should be a simple matter.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Miners Union</title>
<!-- force IE8+ into standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- the next scripts are the html5shiv for IE8 and under to use html5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
@font-face {
font-family: 'minecraftfont';
src: url('./minecraftfont.eot');
src: local('minecraftfont'), url('./minecraftfont.woff') format('woff'), url('./minecraftfont.ttf') format('truetype');
}
body {
margin: 0;
background-image:url(http://igeorgetaylor.ddns.net/mu/bg.jpg);
}
.title {
padding-left:50px;
float: left;
font-size: 30px;
margin-top: 5px;
}
h1 {
color: #a2a2a2;
font-family: 'minecraftfont';
padding-left: 30px;
}
.nav {
display: block;
text-align: center;
height: 80px;
width:90%;
border-radius: 2px;
margin:0 auto 20px;
background-color: #f5f5f5;
border-radius: 2px;
padding-bottom: 10px;
}
nav {
margin-top: 30px;
padding-bottom: 10px;
display:inline-block;
height:2em;
border-radius: 2px;
}
.navlink {
padding-top: 10px;
color: white;
text-decoration: none;
padding-left: 30px;
padding-right: 30px;
font-family: 'minecraftfont';
display: inline-block;
height: 2em;
background-color: #a2a2a2;
border:1px solid transparent;
}
.navlink:hover {
background-color: white;
color: #a2a2a2;
border-color: #a2a2a2;
border-radius: 2px;
}
.br {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.bl {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
#wrapbod {
padding-top: 30px;
border-radius: 2px;
margin-top:30px;
background-color: #d8d8d8;
width:80%;
max-width:1024px;
min-width:800px;
margin:30px auto 0;
border-right-style: solid;
border-right-width:15px;
border-right-color: #8f8f8f;
padding-bottom: 30px;
}
#welcome {
background-color: 6a6a6a;
border-radius: 2px;
width:90%;
margin: auto;
}
.welc {
width: 100%;
}
#mu {
width: 90%;
margin: auto;
background-color: #f5f5f5;
border-radius: 2px;
}
p {
padding: 30px;
}
#header {
display:block;
margin:0 0 20px;
text-align:center;
}
@media screen and (max-width:900px) {
.navlink {
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (max-width:820px) {
#wrapbod {
min-width:0;
width:auto;
margin:20px 5px;
}
.navlink {
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (max-width:700px) {
.title {
float:none;
display:block;
margin:0 auto;
padding:10px 0 0
}
.title br {
display:none
}
.nav {
height:auto;
margin:10px auto
}
nav {
margin:10px auto 0;
height:auto
}
}
@media screen and (max-width:500px) {
nav {
display:block;
margin:5px;
}
.navlink {
padding:10px 2px;
display:block;
height: auto;
margin:5px 0;
}
}
</style>
</head>
<body>
<div id="wrapbod">
<header id="header">
<div class="nav">
<h1 class="title">MINERS <br />
UNION...</h1>
<nav> <a class="navlink br" href="#">Home</a> <a class="navlink" href="#">Info</a> <a class="navlink" href="#">Apply</a> <a class="navlink" href="#">Donate</a> <a class="navlink bl" href="#">Map</a> </nav>
</div>
<div id="welcome"> <img src="http://igeorgetaylor.ddns.net/mu/welcome.png" class="welc" alt="Welcome to Miners Union"> </div>
</header>
<div id="mu">
<h1>Miners Union</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non scelerisque velit. Curabitur tortor ligula, elementum ac laoreet malesuada, sollicitudin vitae neque. Nulla eu sodales metus, ut congue enim. Proin nec hendrerit leo. Donec in orci vel tortor ornare molestie quis ut metus. Suspendisse in sapien lobortis, commodo sem eget, adipiscing massa. Cras ultrices massa ac dui ornare ultricies. Aliquam eget mi in mauris consequat commodo. Donec vehicula sem egestas lobortis porttitor. Phasellus ut convallis erat, id dapibus odio. Vivamus ut augue nisi. Aliquam erat volutpat. Cras vel dui ligula. </p>
</div>
</div>
</body>
</html>
The above is a working demo so just save it and run it in your browser and then open the page wider and smaller to see the effect. You can then fine tune it as required. It has all the elements in place for you to work with so don’t leave anything out as they are in there for a reason.
BTW there shouldn’t be more than one h1 per page (even though html5 allows this) as a page really has only one main heading.
