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

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

Brandy McCain
Brandy McCain
3,160 Points
Posted by Brandy McCain
Brandy McCain
3,160 Points

There is a white line where it should be green.

Where my navigation bar should be green and have white buttons to click to take me to the other site its totally white other then what I am on is green. I took a screenshot: Click Here

Here is my responsive.css:

responsive.css 
@media screen and (min-width: 480px){
 /*****************************
  TWO COLUM LAYOUT
  ******************************/
  #primary{
   width: 50%;
    float:left;
  }


  #secondary{
    width:40;
    float: right;
  }
  /*****************************
  PAGE: ABOUT
  ******************************/
  .profile-photo{
    float: left;
    margin:0 5% 80px 0;}
}
@media screen and (min-width: 600px){

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




}

Also, Here is my main.css:

main.css 
/*****************************
GENERAL
******************************/
body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3{
 margin: 0 0 1em 0; 
}
/*****************************
PAGE: ABOUT
******************************/
.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

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

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-style: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.mail a {
  background-image: url('../img/mail.png'); 
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png'); 
}
/*****************************
HEADING
******************************/
header{
 text-align: 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;
}



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

body {
  background-color: #fff;
  color: #999;
}

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

nav {
  background-color: #599a68;
}

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

/* links colors */
a {
 color: #fff;
}

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

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




/*****************************
NAVEGATION
******************************/
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul{
  list-style: none;
  margin: 0 10px;
  padding: 0px;
}

nav li{
 display: inline-block;
}

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

/****************
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: PORTOFOLIO
***********************/

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

#gallery a {
  float:right;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
#gallery li a p{
  margin: 0;
  padding:5%;
  font-size: 0.75em;
  color: #bdc3c7
}

and lastly here is my HTML:

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sofie | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,700italic|Oxygen' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Sofie</h1>
       <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
             </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
             </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
             </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
             </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
             </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/_sofiec_"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy;  2015 Sofie Clarke.</p>
      </footer>
    </div>

If you need anything else please tell me. :)

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Sofie,

I'm taking a look at this now and will see if I can figure it out. Also, fixed mardown so that CSS would benefit from syntax highlighting.

1 Answer

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Sofie,

responsive.css is being loaded after main.css, so style rules in responsive.css will over-write style rules from main.css.

In main.css, the nav is getting a green background:

nav {
  background-color: #599a68;
}

But, in responsive.css the background declaration is being over-written by the following media query:

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

  /*****************************
  Header
  ******************************/
nav {
    background: none;  /* this removes the green background */
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
    }
}

So, when the screen size is 600px or larger, the nav element will not have a green background.

I'm not sure if this answers your question, so please let me know if this helps or not.

Cheers :)