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 PointsShrink and Resize issue
I am attempting to build a header across the top-center of the page with two names and a ring in between centered. I also have a picture centered in the middle of the page. Everything looks nice on a full screen laptop until I resize the browser and everything moves and looks jumbled. I've read a lot of post and everyone says use a wrapper with a min width and user percentages along with that in your divs. I can't figure this out after a week of reading any and everything I possibly could. <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="100" height="60"> </div>
<div class="christina"> <p class="c">Christina</p> </div>
<div class="weddingWebsite"> <img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
</div>
</body> </html>
.wrapper {
min-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.michael{
color:#EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 30px;
max-width: 100%;
max-height: 100%;
left: 30%;
top: 0%;
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead{ position: fixed; max-width: 100%; max-height: 100%; left: 50%; top: 4%;
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina{ color:#EEE8AA; position: fixed; left: 70%; top: 0%; text-transform: uppercase; font-size: 30px; max-width:100%; max-height: 100%;
}
.c{
max-width: 100%; max-height: 100%;
}
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: 65%;
left: 65%;
transform: translateX(-65%) translateY(-65%);
max-width: 80%;
max-height: 60%;
}
.wedding{ max-width: 80%; max-height: 60%;
}
Cindy Lea
Courses Plus Student 6,497 PointsIt may have something to do with floating left or right maybe?
David Bath
25,940 PointsIndeed, floats are another way to lay this out. But floats can be tricky too!
1 Answer
Michael Morris
675 PointsThanks everyone. I removed all position:fixed for all the parent elements and added display-inline block. I changed left and top to margin-left and margin-top. I removed the max lengths and max widths from the parent elements. In full screen the both names and the ring appear to the top middle left center of the picture stacked horizontally. When I resize to the size of a cell phone I get a horizontal bar at the bottom that allows the name, ring, to move side to side.
.michael{
color:#EEE8AA;
display: inline-block;
text-transform: uppercase;
font-size: 30px;
margin-left: 30%;
margin-top: 0%;
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead{ display: inline-block;
margin-left: 50%;
margin-top: 0%;
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina{ color:#EEE8AA; display: inline-block; margin-right: 70%; margin-top: 0%; text-transform: uppercase; font-size: 30px;
}
.c{
max-width: 100%; max-height: 100%;
}
David Bath
25,940 PointsDavid Bath
25,940 PointsAll of those "position: fixed" declarations make this a very quirky layout, and very non-responsive. Have you tried using "display: inline-block" for michael, ringhead, and christina? That way you could give them each proportional widths, like 40%, 20%, 40%, and they would take up the width of the wrapper without overlapping.