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
Kevin Faust
15,353 Pointshow come theres no stacking and no columns
so when i resize my contact page to mobile size, the contact information doesnt go under general information. they remain side by side all the time.
also im stuck with only 2 columns.
heres my contact.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kevin Faust | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Marck+Script|Lora:400,400italic,700,700italic' 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>Kevin Faust</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">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 currently working for new design work and other similar engagements. If you have any questions, please don't hesitate to contact me</p>
<p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:406-6364">406-6364</a></li>
<li class="mail"><a href="mailto:eyeoffaust1@gmail.com">eyeoffaust1@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=kevinvisionary">@kevinvisionary</a></li>
</ul>
</section>
<footer>
<a href="https://www.facebook.com/irisbestna"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<a href="https://www.twitter.com/kevinvisionary"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2015 Kevin Faust.</p>
</footer>
</div>
</body>
</html>
and my responsive.css code:
@media screen and (min-width: 480px) {
/***************************************
TWO COLUMN LAYOUT
****************************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40% ;
float: right;
}
/***************************************
PAGE: PORTFOLIO
****************************************/
#gallery li{
width 28.3333%;
}
#gallery li:nth-child(3n+1) {
clear: left;
}
}
@media screen and (min-width:660px) {
}
3 Answers
Erik McClintock
45,783 PointsAhhhh, I see the problem. This is a tricky one, indeed!
There is a missing colon after the width property declaration for #gallery li in the media query:
/***************************************
PAGE: PORTFOLIO
****************************************/
/* missing colon after "width"!!! */
#gallery li {
width 28.3333%;
}
#gallery li:nth-child(3n+1) {
clear: left;
}
If you add that colon in (as below), you'll be good to go!
/***************************************
PAGE: PORTFOLIO
****************************************/
/* colon added after "width"! */
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(3n+1) {
clear: left;
}
Erik
Erik McClintock
45,783 PointsKevin,
Edit: Can you share your other styles here? When I copy and paste your contact.html and responsive.css into Workspaces, save the files, and refresh the site preview, the responsiveness works as expected. If you're seeing an error, it may be something that's been changed in your main.css.
Erik
Kevin Faust
15,353 PointsHey Erik here is a screenshot of my workplace:
Erik McClintock
45,783 PointsKevin,
I copied and pasted all your code into my Workspaces, and everything is working as expected. Did you make sure to refresh your site preview? Perhaps you need to clear your cache and try loading it up again?
Erik
Kevin Faust
15,353 PointsHey Erik,
I cleared my cache and then loaded the website on several different browsers including firefox, IE, and opera. But it still doesn't work. Do you have any other ideas/suggestions?
Erik McClintock
45,783 PointsWhen I fork your Workspace and preview the site, again, everything works as expected, in that at mobile sizes, the Contact info section stacks beneath the General Info section, and at larger sizes, they sit next to each other.
Erik McClintock
45,783 PointsAre you sure you're resizing your browser windows small enough to see the mobile styles? Keep in mind that the side-by-side styling kicks in at 480px width, which is a pretty narrow width.
Kevin Faust
15,353 Pointsoh...this is so random but its finally stacking. i didnt even do anything different but now when i resize it it works. the only problem that remains is the 3 column. its still only showing 2 columns instead of 3 when i stretch the page larger than 480px
Erik McClintock
45,783 PointsKevin,
Great! Glad to hear the first issue is resolved.
Are you referring to the image gallery for the 2 vs 3 column issue?
Erik
Kevin Faust
15,353 PointsHey Erik,
In the video, Nick instructed us to put this code inside our media query. the first media query.
so the code is as follows:
@media screen and (min-width: 480px) {
/***************************************
TWO COLUMN LAYOUT
****************************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40% ;
float: right;
}
/***************************************
PAGE: PORTFOLIO
****************************************/
#gallery li{
width 28.3333%;
}
#gallery li:nth-child(3n+1) {
clear: left;
}
}
so in "page:portfolio" that code is supposed to adjust all the images and make 3 columns to appear. but unlike the video, mine is still having 2 columns only
Kevin Faust
15,353 PointsKevin Faust
15,353 Pointsohhhhh im really surprised that i didnt see that! i looked over so many times and it mustve dodged my eye. but anyways now everything is good and working and i can finally move on! thank you so much for the help Erik!!!! cheers
Erik McClintock
45,783 PointsErik McClintock
45,783 PointsMy pleasure! Those tiny little syntax errors are a nightmare, and unfortunately are one of the most prevalent types of errors! They are so easy to make, and so hard to spot. So much time can be wasted hunting them down; I'm just glad we were able to fish it out!
Happy coding!
Erik