Apologies if I'm missing something blindingly obvious here, I haven't coded a website in 2 years so i'm a little rusty, can't figure out why my code isn't making my site responsive. I'm building a very simple "coming soon" page, so there isn't a lot of code to read, I just want all of the div elements to be width:100% and fill the full page when on a smaller device, but the website is not responsive.
HTML:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Crafted Brewing Co.</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
<div class="logoimage"></div>
<a href="###"><div class="comingsoon"></div></a>
<a href="tel:###"><div class="phone"></div></a>
<a href="mailto:###" target="_top"><div class="email"></div></a>
<div class="location"></div>
</div>
</body>
CSS:
body {
background-image: url("backgroundgem.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;}
h1 {
color: white;
font-size: 100%;
}
#main {
margin: 0 auto;
width: 40%;
}
.location {
margin: 0 auto;
width: 100%;
content:url("location.png");
}
.email {
margin: 0 auto;
width: 100%;
content:url("email.png");
}
.phone {
margin: 0 auto;
width: 100%;
content:url("phone.png");
}
.comingsoon {
margin: 0 auto;
width: 100%;
content:url("websitecomingsoon.png");
}
.logoimage {
margin: 0 auto;
width: 100%;
content:url("logo2.png");
}
@media (max-width: 500px) {
#main {
width: 100%;
}
}
Aucun commentaire:
Enregistrer un commentaire