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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

William LaMorie
William LaMorie
11,769 Points

Rightmost Nav Element falls to second line after the media query at 660px.

I've started working on the media query for 660px and larger views, and I've encountered this issue where the last item on the nav last drops down on to a second line. Following advice elsewhere in discussion of this video, I played with the max widths some, and this has reduced the range of values in which this occurs, but I really would like to know what's going on here... here's the main css file:

/******************************
GENERAL
******************************/

html { 
    overflow-y: scroll; 
}

body{
  font-family: 'Open Sans', sans-serif;
}

#wrapper{
  max-width: 940px; /* max width is no larger than max. */
  margin: 0 auto; /* the first is top and bottom and the second is left and right */
  padding: 0 5%; /* 5% of parrent element width */
}

a {
  text-decoration:none;
}

img {
  max-width: 100%;
}

h3{
  margin: 0 0 1em 0;
}


/******************************
HEADING
******************************/

header{
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo{
  text-align: center;
  margin:0;
}

h1 {
  font-family:'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;

}

h2{
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/******************************
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 18px;
}



/******************************
FOOTER
******************************/

footer{
  font-size: 0.75em;
  text-align:center;
  padding-top: 50px;
  color: #ccc;
  clear:both;
}

.social-icon{
  width: 20px;
  height: 20px;
  margin: 0 5px;
}


/******************************
PAGE: PORTFOLIO
******************************/

#gallery{
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7  
}

#gallery li a p{
  margin: 0;
  padding: 5%;
  font-size:0.75em;
  color: #bdc3c7;
}



/******************************
PAGE: ABOUT
******************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
  clear: both;
}




/******************************
PAGE: CONTACT
******************************/

.contact-info{
  list-style:none;
  padding: 0;
  margin:0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat:no-repeat;
  background-size:20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a{
  background-image:url('../img/phone.png');
}

.contact-info li.email a {
  background-image:url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image:url('../img/twitter.png');
}


/******************************
COLORS
******************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* Green header */
header{
  background: #6ab47b;
  border-color: #599a68;
}

/* Mobile nav background */
nav {
  background: #599a68;
}

/* logo text */
h1, h2{
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

and the responsive.css:

@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% 80px 0;
  }
}

@media screen and (min-width: 660px){

  /******************************
  HEADER
  ******************************/
  nav{
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align:right;
    width: 52%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align:left;
    width: 35%;

  }

}

Again, I've played with the widths of the #logo and the nav elements, this not what's causing the problem, it occurred with then at the original s Any insight into what's going on would be great!

Thanks! Will

Can you share the HTML too?

1 Answer

Jason Gong
Jason Gong
4,537 Points

Looking at the problem, since it only happens at above 680px, it won't be from your responsive.css code (I'm just saying this since it seems like you're also playing with the width of the nav elemenet in there.

The issue is that you are making the horizontal padding 18px instead of 10px, which at certain screen widths would add up to more than the 45% or 52% allocated to the container for the nav element when you include the absolute values set for the padding and margins of the enclosed elements:

nav a {
  font-weight:800;
  padding: 15px 18px;
}

If you change it to 10px everything should be fine!

Jason

William LaMorie
William LaMorie
11,769 Points

Thank you! Typo for the loss!

I actually tired to figure out if this was some sort of padding or margin issue, and I couldn't get far with it using Chrome's inspect element tool... I'll have to look at it more when I get to someplace where I have a better machine then my little 235$ when new 4-year-old compaq I bought when my last machine died to hold me over, but I do know that I couldn't 'see' the padding on the a's in the box view or by highlighting things... is that because they're 'wrapped up' in the li?

Jason Gong
Jason Gong
4,537 Points

I'm not sure why you can't see the padding on the developer tools, I seem to be able to. What do you mean wrapped up in the li? Sorry I couldn't help for this question!

Jason

William LaMorie
William LaMorie
11,769 Points

Looking at it at home, I can see that where my confusion was is that it wasn't intuitive to me that the <a> tag would have a padding that would go beyond the dimensions of the next highest element it was a part of (a <li> in this case.)

Lesson learned