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 trialPete Glikofridis
Courses Plus Student 585 PointsThe 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
1 Answer
Molly Morby
2,398 PointsYou should watch the video and do it with him thats what I did and it made making my website so much easier.
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsHey 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.
and: