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 Build a Three Column Layout

Ethan Abels
Ethan Abels
3,834 Points
Posted by Ethan Abels
Ethan Abels
3,834 Points

Can't get sections to separate into columns

I can't get my contact info to go right when the window is wide enough. Here is my relevant code:

index.html:

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">

contact.html:

<section id="primary"> <h3>General Information</h3> <p>I am not currently looking for new design work, but I am available for speaking gigs, and 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 e-mail 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:555-6425">555-6426</a></li> <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=icecoldc2ub">@icecoldc2ub</a></li> </ul> </section>

responsive.css:

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

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

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

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

}

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

}

Luca Argenziano
Luca Argenziano
16,416 Points
Luca Argenziano
Luca Argenziano
16,416 Points

Have you set some margins to these elements? Margin is always added to the fixed width, so if you use 90% of the viewport width for your containers, you can't set more than 10% for margins.

Ethan Abels
Ethan Abels
3,834 Points
Ethan Abels
Ethan Abels
3,834 Points

Luca Argenziano is that later in the video? I try to immediately stop when something in my site doesn't work as demonstrated as I don't want to miss something and have to go fishing for it later.

1 Answer

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

It works for me. Maybe something in the main.css (which you didn't share) is affecting it?

Ethan Abels
Ethan Abels
3,834 Points
Ethan Abels
Ethan Abels
3,834 Points

here's my main, thanks for the quick replies!

/********************* GENERAL **********************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;

}

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/********************* HEADING **********************/

header { float: left; margin: 0 0 30px 0; padding: 5x 0 0 0; width: 100% }

logo {

text-align: center;
margin: 0;

}

hl { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em;
}

/********************* NAVIGATION **********************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/********************* FOOTER **********************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px height: 20px; margin: 0 5px; }

/********************* PORTFOLIO **********************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color:#f5f5f5; color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: .75em; color: #bdc3c7 }

/********************* PAGE: ABOUT **********************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/********************* PAGE: CONTACT **********************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px;
}

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

/********************* COLORS **********************/

/* site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile*/ nav { background: #599a68; }

/* logo text*/ h1, h2 { color:#fff; }

/* links */ a { color:#6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

here's the full part of my contact.html as well in case that helps

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ethan Abels | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Ethan Abels</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 not currently looking for new design work, but I am available for speaking gigs, and 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 e-mail 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:555-6425">555-6426</a></li> <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=icecoldc2ub">@icecoldc2ub</a></li> </ul> </section> <footer> <a href="https://twitter.com/icecoldc2ub"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/ethan.abels"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Ethan Abels</p> </footer> </div> </body> </html>