Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Morris
675 PointsFull screen looks great but garbled when resized
Hello everyone. I put together the first page of my website. The home page looks fine at full page but when I resize it smaller everything goes haywire. Here is the link to my website www.michaelmorris.website. I'm posting my code below.
<!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"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="Main.css">
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![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"width= "5%" height="5%" >
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="date">
<p class="d">Sept 1, 2016 7:00 PM Salisbury, NC</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website" >
</div
</div> </body> </html>
wrapper { width: 800px; height: auto; margin-left: auto; margin-right: auto; margin-top: 11px; /* padding: 0 5%; */
}
.michael { width: 10%; height: 5%;
border: 1px white;
/* max-width: 100%; */
/* max-height: 100%; */
margin: 0px;
}
.m{ color: #EEE8AA; max-width: 100%; max-height: 100%; text-transform: uppercase; position: absolute; font-size: 1.8em; left: 30%; top: 4%; font-style: italic;
}
.ringhead { width: 10%; height: 5%; background-color: white; }
.ring{
position: absolute; /* max-width: 100%; / / max-height: 100%; */ float: left;
left: 49%;
top: 3%;
max-width: 100%;
max-height: 100%;
}
.christina {
width: 10%;
height: 5%; background-color: white;
border: 1px white;
/* max-width: 100%; */
/* max-height: 100%; */
margin: 0px;
}
.c{
color: #EEE8AA;
max-width: 100%;
max-height: 100%;
text-transform: uppercase;
position: absolute;
font-size: 1.8em;
right: 23%;
top: 4%;
font-style: italic;
}
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;
}
.date{ border-color: white; width: 100%; height: 1%; background-color: white;
}
.d{
color: #EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 1.5em;
font-style: italic;
/* max-width: 100%; */
/* max-height: 100%; */
left: 45%;
top: 20%;
max-width: 100%;
max-height: 100%;
padding-left: 0%;
padding-right: 0%;
margin-right: 20%;
}
.weddingWebsite{
width: 100%;
height: 20%;
}
.wedding{
border-style: double;
border-color: #EEE8AA;
position: fixed;
top: 100%;
left: 55%;
transform: translateX(-55%) translateY(-100%);
max-width: 70%;
max-height: 70%;
background-color: white;
}
}
2 Answers
anil rahman
7,786 PointsYou have no media queries which is what changes your website to change on resize. The media query is what will make the website adjust to another size.
Michael Morris
675 PointsI was watching the treehouse video and this didn't seems to be a problem without media queries, but I understand what you are saying. I'll definetly take a look at them.