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

Pete Glikofridis
PLUS
Pete Glikofridis
Courses Plus Student 585 Points
Posted by Pete Glikofridis
Pete Glikofridis
Courses Plus Student 585 Points

The NAV elements (portfolio, about, & contact) - seem to sit on the right but at the bottom

The nav elements in the video raise to the middle of the screen when screen width is at least 660 pixels.

Any ideas, code for the responsive.css is shown below:

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

/************************************** TWO COLUMN LAYOUT **************************************/

#primary { width:50%; float:left; }

#secondary { width:40%; float:right; }

/************************************** 3 * 5 (3 columns 2.5% per margin) meaning 5% per column (left and right margin
added
together i.e. 2.5% + 2.5% = 5% per column.)

so 100% (screen width) - 15% (margins) = 85%

85% / 3 = 28.333333333% **************************************/

/************************************** 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:45%;
  vertical-align:middle;
}

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

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 0.825em;
  margin-bottom: 20px;
}

}

HTML file for the portfolio page (sample for nav element) below:

<body> <header> <a href="index.html" id="Logo"> <h1>Nick</h1> <h2>Computer Scientist</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>

Look forward to any responses

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hey so your code displays properly in the forums, can you wrap each section of code with three backticks (probably next your 1 key) and a newline on either end?

e.g.

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

and:

```
<html>
...
</html>
```

1 Answer

Molly Morby
Molly Morby
2,398 Points
Molly Morby
Molly Morby
2,398 Points

You should watch the video and do it with him thats what I did and it made making my website so much easier.