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
erdragerdragsson
Courses Plus Student 5,887 PointsProblem with link navigation in header wehn resizing browser!
This is what it looks like! http://imgur.com/a/8yJNS (start from bottom then scroll up)
first at desktop size it looks good, and when i resize the browser the links follow, then it starts overlap the header logo image, then it bumps down then at the smalles screen it looks good,
heres my code for the responsive css
@media screen and (max-width: 480px) {
.intro-pic {
position:relative;
top: 10px;
width: 65%;
margin: 0 auto;
left: 20px;
right: 20px;
}
.main-header {
position:relative;
height: 150px;
}
#nav ul {
position: relative;
white-space: nowrap;
bottom: -70px;
left: 35px;
margin: 0 auto;
}
.quote {
}
}
@media screen and (min-width: 670px) {
}
and my CSS
:root {
font-family: 'Josefin Sans', sans-serif;
min-height: 98%;
border-bottom: 40px solid #008B8B;
border-top: 10px solid #007D7D;
}
body {
background-color:#0099FF;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
color: #E6E68A;
line-height: 1.62;
}
#container {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
h1, h2 {
margin-bottom: .78em;
font-weight: bolder;
font-size: 28px;
text-shadow: 1px 1px 1px black;
}
p {
font-weight: bold;
font-size: 18.88px;
margin: 1.3em 0;
}
a.Other-links {
text-decoration: none;
color: #336633;
}
a.Other-links:hover {
text-decoration: underline;
color:#003300;
}
a.nav-links {
background-color: #339933;
margin: 5px 0px 0px 2px;
padding: 0px 5px 0px 5px;
border-radius: 15px;
text-decoration:none;
color: #fff;
border: 2px solid black;
}
.nav-links:hover {
background-color:#336633;
padding: 2px 5px 2px 5px;
box-shadow: 0px 0px 1px black;
}
#nav a {
padding: 5px 15px 5px 15px;
width: 100%;
}
#nav ul {
list-style: none;
margin: 0px 28px;
padding: 0;
}
#nav li {
display: inline-block;
}
#nav {
text-align: right;
margin: 20px 0 0;
position: relative;
top: -60px;
left: -40px;
}
#copyright {
max-width: 100%;
text-align: center;
margin-top: 64px;
}
header {
float: left;
margin: 0 0 40px 0;
padding: 5px 0 0 0;
width: 100%;
}
header {
background:#008B8B;
border-color: #008B8B;
}
header {
border-bottom: 10px solid #007D7D;
}
.intro-pic {
margin: auto 30px;
}
.treehouse-logo {
width: 200px;
height: 200px;
border: 3px solid black;
border-radius: 30px;
}
.treehouse-logo:hover {
box-shadow: 0px 0px 10px black;
}
.quote {
display: inline-block;
position: relative;
top: -100px;
color: #272727;
text-shadow: 1px 1px 1px #272727, 1px 1px 1px #272724 ;
}
.pic-ofme {
display:block;
margin-left: auto;
margin-right: auto;
border: 3px solid darkgreen;
border-radius: 50%;
}
#Secondary > h1{
text-align: center;
}
3 Answers
Liz Laffitte
23,691 PointsIt's hard to replicate without the html, can you add that?
Just looking at the CSS, I think you're going to have to change/add a new media query to the max-width size where it starts breaking (Like your 502px screenshot) and for every breaking point. But start with your first breaking point and work from there.
The overlapping has to do with the relative positioning. Check this out from W3: "The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow."
You're going to have to experiment with the top, left, right values until it's in the place you want for each breaking point.
I would recommend not using the position: relative; here for this reason.
I hope some of this helps!
erdragerdragsson
Courses Plus Student 5,887 Pointscan anyone of you help with this? because ive followed your tracks, but i cant figure how to position the nav links
// erdrag
Liz Laffitte
23,691 PointsI think the position: relative is your problem. I'm having trouble just recreating the whole thing because I don't have the picture image, but I think if you take that out and control the placing of objects with float, align and margins, you'll have an easier time making it responsive.
Also: You're missing a closing tag in your html on your second link tag, and your the anchor in your third list item has an extra a in there before the href.
Here's my code for the nav from that project:
/*************************
NAVIGATION
**************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
@media screen and (min-width: 660px) {
/*************************
RESPONSIVE HEADER
**************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
}
}
erdragerdragsson
Courses Plus Student 5,887 Pointserdragerdragsson
Courses Plus Student 5,887 Pointserdragerdragsson
Courses Plus Student 5,887 Pointserdragerdragsson
Courses Plus Student 5,887 Pointsyou have any idea?