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

Alessandro Giordo
Alessandro Giordo
2,065 Points

I can't see my green header. why?

I can't see my green header. why?

Matthew Goodman
Matthew Goodman
12,786 Points

Can you show your code please.

12 Answers

Alessandro Giordo
Alessandro Giordo
2,065 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nunziella</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,400italic,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

<body>

<header>

  <a href="index.html" id="logo">
    <h1>Nunziella Salluce</h1>
    <h2>Designer</h2>
  </a>

  <nav>
    <ul>
      <li><a href="index.hrml" 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>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> </ul> </section> </div> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://twitter.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nunziella</p> </footer> </body> </html>

Alessandro Giordo
Alessandro Giordo
2,065 Points

responsive.css

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

#primary { width: 50%; float: left; } #secondary { width: 40%; float: right; }

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

}

.profile-photo { float: left; margin: 0 5% 80px 0; }

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

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; }

}

Matthew Goodman
Matthew Goodman
12,786 Points

Just to ask is this something you are working on your own, and if this is the whole HTML code your missing a few things like the body head, index tags.

Matthew Goodman
Matthew Goodman
12,786 Points
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Matthew Goodman | Web designer </title>
    <link rel="stylesheet" href="css/normalize.css"><link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <header>
    <a href="index.html" id="logo">
    <h1>Matthew Goodman</h1>
    <h2>Designer</h2>
    </a>
    <nav>
      <ul>
        <li><a href="indext.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>
Alessandro Giordo
Alessandro Giordo
2,065 Points

I'm just following the course: I've made this index.html and then the pages: about.html, contact.html, main.css and this responsive.css. after follow the instructions about the second @media screen and my green header on the top it's disappear

Matthew Goodman
Matthew Goodman
12,786 Points

well your code works, you know its for a very thin green line along the bottom of the header that blends in with the green header above, I might be wrong which I think I might be but it worked for me using your code.

Alessandro Giordo
Alessandro Giordo
2,065 Points

hmmm I think something it's broke!

Alessandro Giordo
Alessandro Giordo
2,065 Points

INDEX

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nunziella</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,400italic,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

<body>

<header>

  <a href="index.html" id="logo">
    <h1>Nunziella Salluce</h1>
    <h2>Designer</h2>
  </a>

  <nav>
    <ul>
      <li><a href="index.hrml" 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>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> </ul> </section> </div> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://twitter.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nunziella</p> </footer> </body> </html>

Alessandro Giordo
Alessandro Giordo
2,065 Points

Contact

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nunziella</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,400italic,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

<body>

<header>

  <a href="index.html" id="logo">
    <h1>Nunziella Salluce</h1>
    <h2>Designer</h2>
  </a>

  <nav>
    <ul>
      <li><a href="index.hrml">Portfolio</a></li>
      <li><a href="about.html" >About</a></li>
      <li><a href="contact.html" class="selected">Contact</a></li>
    </ul>
  </nav>

</header>

<div id="wrapper"> <section id="primary"> <h3>General information</h3> <p>I am not looking for</p> <p>Please only use phone</p> </section>

<section id="secondary"> <h3>Contact details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:663663636363">663663636363</a></li> <li class="mail"><a href="mailto:nck@gmail.com">nck@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/internet/tweet?screen_name=nun">@nun</a></li> </ul> </section> </div> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://twitter.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nunziella</p> </footer> </body> </html>

Alessandro Giordo
Alessandro Giordo
2,065 Points

About

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nunziella</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,400italic,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

<body>

<header>

  <a href="index.html" id="logo">
    <h1>Nunziella Salluce</h1>
    <h2>Designer</h2>
  </a>

  <nav>
    <ul>
      <li><a href="index.hrml">Portfolio</a></li>
      <li><a href="about.html" class="selected">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

</header>

<div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi I'm Nunziella and this is my design portfolio</p> <p>If you'd like to follow me on twitter</p> </section> </div> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://twitter.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nunziella</p> </footer> </body> </html>

Alessandro Giordo
Alessandro Giordo
2,065 Points

main.css

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

body {

font-family:: 'Open sans', sans-serif; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

wrapper {

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

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; }

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

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

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

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

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; }

/* green header*/ a { color: #6ab47b; }

/****** HEADING **********/ header { background: #6ab47b; border-color: #888888; } / logo text / h1, h2 { color: #fff; } / nav background on mobile*/ nav { background: #888888; } nav a, nav a:visited { background: #fff; } /* select nev link */ nav a.selected, nav a:hover { color: #32673f; }

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

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

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; } /* site body */

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

.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.mail a { background-image: url('../img/mail.png'); }

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

Alessandro Giordo
Alessandro Giordo
2,065 Points

responsive.css

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

#primary { width: 50%; float: left; } #secondary { width: 40%; float: right; }

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

}

.profile-photo { float: left; margin: 0 5% 80px 0; }

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

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; }

}