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 trialjames niemerg
1,001 PointsNav alignment when expanding causes about and contact to stack.
Nav alignment when expanding causes about and contact to stack. This only happens for a split second after it goes from the tablet size to desktop size. It fixes itself if I expand it more. Ive included a screenshot.
http://i.imgur.com/Gdqo8Nu.png
/***********************************
HEADER
***********************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
2 Answers
Kalen Loncar
8,743 PointsTry this on for size.
In #nav, change:
width: 52.5%; DELETE/comment out: margin-right;
In #logo, change:
width: 42.5%
I tried messing with the percentages and it worked for me. Not sure it will for you as your name may be a different length. I also had to change the font size of my name to 2.25em because it was causing issues. Not sure if that changes anything.
If you download Nick's source code, his website does the same. This may fix it for all! Let me know!
@media screen and (min-width: 660px) {
/********************************
PAGE: HEADER
********************************/
nav {
background: none;
float: right;
font-size: 1.125em;
/*margin-right: 0%;*/
text-align: right;
width: 52.5%;
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 42.5%;
}
h1 {
font-size: 2.25em;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
}
David Viri
11,324 PointsI cannot tell if you have media queries defined in this example. If you do it may be that you have a small gap in your screen width within those definitions that is causing this problem.
james niemerg
1,001 PointsI do have them defined.
could the difference in the #primary and #secondary tags be causing this? Here is the whole code.
@media screen and (min-width: 480px) {
/***********************************
Two COLUMN LAYOUT
***********************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/***********************************
PAGE: PORTFOLIO
***********************************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
/***********************************
PAGE: ABOUT
***********************************/
.profile-photo {
float: left;
margin: 0 5% 175px 0;
}
}
@media screen and (min-width: 660px) {
/***********************************
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: .825em;
margin-bottom: 20px;
}
}
Kalen Loncar
8,743 PointsKalen Loncar
8,743 PointsNick Pettit
james niemerg
1,001 Pointsjames niemerg
1,001 PointsHey thanks, this got me on the right track. I had already tried messing with the font size to no avail. What ended up working for me was changing nav to 51% and #logo to 42%. Also removed the margin-right like you suggested. No issues now.
Thanks!