Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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. :)

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

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 :)