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 trialshane smales
1,933 Pointsresizing the logo and nav using a media query
hi,
my nag doesn't seem to want to resize and go into the header once the screen resolution is bigger than 660px. I aren't sure if this is to do with something in the HTML or CSS.
@charset "UTF-8";
/if the width of the screen is any bigger than 480px apply these styles/ @media screen and (min-width: 480px){
/*********************************
TWO COLUMN LAYOUT
*********************************/
#primary{
width:50%;
float:left;
}
#secondary{
width:40%;
float:right;
}
/*********************************
calculation for portfolio layout
3*5 = 15%
100% - 15% = 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;
/*top, right, left, bottom*/
margin:0 5% 80px 0;
}
}
/if the width of the screen is any bigger than 660px apply these styles/ @media screen and (min-width: 660px){
/*********************************
HEADER
*********************************/
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%;
}
}
5 Answers
Amy Burrows
11,362 PointsHi Shane, Your styling looks the way it should. Maybe it's something in your markup, like an inline image size? If you're still having problems could you please post your HTML?
Michael Caveney
50,144 PointsTake another look at your formatting? Your code is showing up partially in the workspace, and partially as text, so something's definitely up there.
Amy Burrows
11,362 PointsAnother thought. If you have a border on either of the two elements in another stylesheet, you would need to set your box-sizing to border-box.
shane smales
1,933 Pointshey,
I did the tasks in a Text editor and not the workspaces, so thats why it looks so odd because i have just copied and pasted into the comments.
here is my html:
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<title>Shane Smales | 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">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Shane Smales</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">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 Petit" class="profile-photo">
<h3>About</h3>
<p>Hi, Im shane smales and this website is a tut i followed on Team Tree house. I have been following this tutorial because it will give me some foundation knowledge in order to build my own responcive portfolio site.</p>
<p>If you would like to follow this tut follow Nick Petit <a href="http://twitter.com/nickrp">@nickrp</a></p>
</section>
<footer>
<a href="http://twitter.com"><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>© 2014 Shane Smales</p>
</footer>
</div>
</body>
</html>
shane smales
1,933 Pointshey guys,
Thanks for all your help but i have managed to solve the problem.
I simply hadn't included float: left; into my header on the main.css page, I do appreciate all the help it just shows what a great bunch of people use team treehouse.