Menu
Hello everyone I have 3 divs all used as headers in the top middle of the home page. All three are postioned
correctly when full sized but when I resize down to the size of a smartphone they all move in a downward direction about 5-10 pixes. I have a background plain border that I do not want them going past when I resize therefore this is undesirable for me. I have a link to my treehouse link were you can run my index.html file as well as see my code. Ill also post y code below. the three head dives from left to right are michael, ring(image) and christina
[url]https://w.trhou.se/054p1vz3tv
[code
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>The HTML5 Herald</title>
<meta name=”description” content=”The HTML5 Herald”>
<meta name=”author” content=”SitePoint”>
<link rel=”stylesheet” type=”text/css” href=”Main.css”>
<!–[if lt IE 9]>
<script src=”
<![endif]–>
</head>
<body>
<div class=”wrapper”>
<div class=”michael”>
<p class=”m”>Michael</p>
</div>
<div class=”ringhead”>
<img src=”Images/gold.gif” class=”ring” alt=”Wedding Ring” `enter code here
</div>
<div class=”christina”>
<p class=”c”>Christina</p>
</div>
<div class=”weddingWebsite”>
<img class=”wedding” src=”Images/Wedding Website.jpg” alt=”Wedding Website” width=”350″ height=”50″>
</div
</body>
</html>
.wrapper {
width: 497px;
height: 100px;
margin: 0 auto;
/* padding: 0 5%;
display: block;
}
.michael {
color: #EEE8AA;
position: relative;
text-transform: uppercase;
font-size: 30px;
float: left;
display: inline-block;
border: 1px white;
/* max-width: 100%; */
/* max-height: 100%; */
/* left: 30%; */
/* top: 0%; */
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead {
position: relative;
/* max-width: 100%;
/* max-height: 100%;
float: left;
bordr: 1px solid black;
display: inline-block;
/* left: 50%;
/* top: 4%;
}
.ring{
max-width: 80%;
max-height: 60%;
}
.christina {
color: #EEE8AA;
position: relative;
float: left;
borer: 1px solid black;
/* top: 0%;
text-transform: uppercase;
font-size: 30px;
padding-left: 10%;
/* max-width: 100%;
/* max-height: 100%;
}
.c{
max-width: 80%;
max-height: 60%;
}
body{
background-image: url(“Images/Top Banner.jpg”), url(“Images/Middle Banner.jpg”), url(“Images/Bottom Banner.png”);
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 55%;
left: 55%;
transform: translateX(-55%) translateY(-55%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
]