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

CSS

Missing something in my HTML for my responsive columns in contact page

Hi guys loser noob here, I'm just starting to make the two columns for the responsive css. It's all good but the problem is the two columns stay side by side even when I resize the window to mobile size, I guess I'm missing the code to have them stacked one on top of another here's my main.css code

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

a {
 text-decoration: none; 
}

#wrapper {
  max-width:940px;
  margin: 0 auto;
  padding: 0 5%;
}

#logo {
  text-align:center;
  margin:0;

}

a {
  color:#6ab47b;
}

img {
 max-width:100%; 
}

h3 {

 margin:0 0 1em 0;

}

    /*********
  BODY
********/

  body {
 background-color:#fff;
  color:#999;
}


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

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

}

h1 {
   font-family: 'Fjalla One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
  }

header {
  background: #6ab47b;
  border-color: #599a68;

}

h1, h2 {
  color:  #fff;

}

nav {

  background: #599a68;
}

nav a.selected {
 color: #32673f; 
}

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


}

nav a, nav a:visited{
  color: #fff; 
}

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

}

nav li {
  padding: 0 5px;
 display:inline-block; 

}

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

}

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

}

  /*********
PAGE 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: 0.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'); 

}

2 Answers

You should try adding a media query at a certain breakpoint... say at 768px or something. Inside that media query set the width property of the columns to 100%. They should stack after that :) Hope this helps!

This is for the website building course btw

What point are you at?