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

General Discussion

Posted by Jeff Ward
Jeff Ward
8,978 Points

I cannot get my 3 columns to reduce to 2 on my Portfolio Page. AND I cannot get my 2 columns to reduce to 1 on contact

I cannot get my 3 columns to reduce to 2 on my Portfolio Page. AND I cannot get my 2 columns to reduce to 1 on contact page when I make the page smaller. HELP!

RESPONSIVE HTML

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

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

primary {

width:50%; float:left; }

secondary {

width:40%; float:right; }

/************************************* PAGE: PORTFOLIO || THREE COLUMN LAYOUT **************************************/

gallery li {

width: 28.333333333%; }

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

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

}

Jeff Ward
Jeff Ward
8,978 Points

CONTACT HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jeff Ward | Web Developer/Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700|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>Jeff Ward</h1> <h2>Web Developer/Desinger</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 looking for a job in the Web Development Sector, please contact me if you would like to hire me. I am also availble for Freelance work, please contact me if you would like me to create a project for you. If you have any questions, please don't hesitate to contact me.</p> <p>Please only use phone to contact me for urgent inquiries, otherwise E-mail and facebook are the best ways to reach me.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone">Phone: <a href="tel:415-948-0160">415-948-0160</a></li> <li class="email">E-mail: <a href="mailto:jeffwardcoding@gmail.com">jeffwardcoding@gmail.com</a></li> <li class="facebook">facebook: <a href="https://www.facebook.com/jward01">Jeffward01</a></li>
</ul> </section> <footer> <a href="https://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class = "social-icon"></a> <a href="https://www.facebook.com/jward01"><img src="img/facebook-wrap.png" alt="Facebook Logo" class = "social-icon"></a> <a href="https://www.instagram.com/jeffward01"><img src="img/instagram_mono.png" alt="Instagram Logo" class = "social-icon"></a> <a href="https://www.linkedin.com/pub/jeff-ward/84/28b/5b1"><img src="img/linkedin_logo11.jpg" alt="LinkedIn Logo" class= "social-icon"></a> <a href="https://github.com/jeffward01"><img src="img/github_logo.png" alt="Github Logo" class="social-icon"></a> <p>© 2015 Jeff Ward</p> </footer> </div> </body> </html>

Jeff Ward
Jeff Ward
8,978 Points

INDEX HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jeff Ward | Web Developer/Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700|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>Jeff Ward</h1> <h2>Web Developer/Desinger</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> <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>Playing with Blending modes in Photoshop</p> </a>
</li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows</p> </a>
</li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips Created with Photoshop Brushes</p> </a>
</li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a>
</li> </ul> </section> <footer> <a href="https://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class = "social-icon"></a> <a href="https://www.facebook.com/jward01"><img src="img/facebook-wrap.png" alt="Facebook Logo" class = "social-icon"></a> <a href="https://www.instagram.com/jeffward01"><img src="img/instagram_mono.png" alt="Instagram Logo" class = "social-icon"></a> <a href="https://www.linkedin.com/pub/jeff-ward/84/28b/5b1"><img src="img/linkedin_logo11.jpg" alt="LinkedIn Logo" class= "social-icon"></a> <a href="https://github.com/jeffward01"><img src="img/github_logo.png" alt="Github Logo" class="social-icon"></a> <p>© 2015 Jeff Ward</p> </footer> </div> </body> </html>

6 Answers

Jose Linares
Jose Linares
5,062 Points
Jose Linares
Jose Linares
5,062 Points

You need to show us your code

Jeff Ward
Jeff Ward
8,978 Points

SORRY I was uploading it.

Jose Linares
Jose Linares
5,062 Points
Jose Linares
Jose Linares
5,062 Points

ok let's see

Jose Linares
Jose Linares
5,062 Points
Jose Linares
Jose Linares
5,062 Points

It's hard to tell what's wrong like that, If you want you can download all your files and create a .zip with all of them and send them to my email jlinares9696@gmail.com and I will try to help you.

Jeff Ward
Jeff Ward
8,978 Points

Thank you immensely for the help. I just emailed you the files .zip

Jose Linares
Jose Linares
5,062 Points
Jose Linares
Jose Linares
5,062 Points

I have the .zip. Let's see what I find.

Jeff Ward
Jeff Ward
8,978 Points
Jeff Ward
Jeff Ward
8,978 Points

Jose and I found the problem. My computer screen is to small for the changes to occur... 15inch macbook. lolz.

Thanks to Jose for discovering the issue!

Jose Linares
Jose Linares
5,062 Points
Jose Linares
Jose Linares
5,062 Points

Actually the problem was that he couldn't shrink his browser window to less than 480px wide, so the website was always on desktop mode. But it's ok, I've been there so I forgive my buddy Jeff. :)