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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Ryan B.
Ryan B.
3,236 Points
Posted by Ryan B.
Ryan B.
3,236 Points

When shrinking the browser to a mobile size the contact info column does not shift beneath the General Information.

Also, the pictures in the portfolio section are stacked up vertically in column one(left side). Any suggestions on what I might be doing wrong?

(ie.) 1 2 6 9 12

Ryan B.
Ryan B.
3,236 Points
Ryan B.
Ryan B.
3,236 Points 
@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 {
  clear:left;
}

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


@media screen and (min-width:660px) {
 }
Ryan B.
Ryan B.
3,236 Points
Ryan B.
Ryan B.
3,236 Points 
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ryan Bilello | Designer</title>
    <link rel="stylesheet" href="CSS/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans: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>Ryan Bilello</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 availsble for speakings gigs and similar engagements. If you have any questions please dont hesitiate to contact me</p>

         <p>Please only use phone contact for urgent inquiries, otherwise Twitter and email are the best way to reasch me.</p>
       </section>

       <section id="secondary">
         <h3>Contact details</h3>
         <ul class="contact-info">
           <li class="phone"><a href="Tel:555-6425">555-6425</a></li>
           <li class="mail"><a href="mailto:ryanbilello@example.com">ryanbilello@example.com</a></li>
           <li class="twitter"><a href="http://twitter.com/4TheLifeOfMe20">@4TheLifeOfMe20</a></li>
         </ul>  
       </section>
      <footer>
        <a href="http://twitter.com/4TheLifeOfMe20"><img src="Img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/ryan.bilello.3"><img src="Img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Ryan Bilello.</p>
      </footer>
        </div>
  </body>
</html>

3 Answers

Ryan B.
Ryan B.
3,236 Points
Ryan B.
Ryan B.
3,236 Points

I figured out the issue. User error. I added an extra #gallery li {) in between the first one which holds the width value of 28.333% and the nth-child. My fault.

Alexander Costa
Alexander Costa
11,464 Points
Alexander Costa
Alexander Costa
11,464 Points

Anything in responsive css will over right whats in main css. The issue may be their? or their may be a problem clearing a float.

also with that code I cant see the images since I dont have your files so I can tinker with it.

Ryan B.
Ryan B.
3,236 Points
Ryan B.
Ryan B.
3,236 Points

How can I get you those images?

eck
eck
43,038 Points
eck
eck
43,038 Points

When I grabbed your code the columns stacked correctly at mobile screen size. Is that still a problem for you?

A problem I do see, though, is that your primary and secondary columns, which are being floated, are not inside of a container that has a clearfix, which causes the the footer's position in the layout to break. (You can read about clearfix here)

The code below should fix that problem:

*You were also missing your html, head and body tags from your html which I have included.

@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 {
  clear:left;
}

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


/**********************************  
        Clearfix
  ***********************************/

.group:after {
  content: "";
  display: table;
  clear: both;
}


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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ryan Bilello | Designer</title>
    <link rel="stylesheet" href="CSS/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans: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>Ryan Bilello</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">
    <div class="group">
      <section id="primary">
        <h3>General Information</h3>
        <p>I am not currently looking for new design work but I am availsble for speakings gigs and similar engagements. If you have any questions please dont hesitiate to contact me</p>

        <p>Please only use phone contact for urgent inquiries, otherwise Twitter and email are the best way to reasch me.</p>
      </section>

      <section id="secondary">
        <h3>Contact details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="Tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:ryanbilello@example.com">ryanbilello@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/4TheLifeOfMe20">@4TheLifeOfMe20</a></li>
        </ul>  
      </section>
    </div>

    <footer>
      <a href="http://twitter.com/4TheLifeOfMe20"><img src="Img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://facebook.com/ryan.bilello.3"><img src="Img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2014 Ryan Bilello.</p>
    </footer>
  </div>
</body>  
</html>
Ryan B.
Ryan B.
3,236 Points
Ryan B.
Ryan B.
3,236 Points

Thats interesting. In the lessons, "clearfix" was never mentioned and i've never seen that before. Was there any other way around this? Let me see if it fixed the issue on my end. I appreciate your help on this.

Ryan B.
Ryan B.
3,236 Points
Ryan B.
Ryan B.
3,236 Points

Ok. So, the two column contact page works just fine in Google Chrome when shrinking it to a mobile size. Safari was the problem. However, all my pics from the id gallery are stacked up in one column,vertically on the left side. Im hesitant to use the "clearfix" option since we haven't learned that as of yet. Any other suggestions?

eck
eck
43,038 Points

So long as you are using float left and float right for your layout you need to use some type of clearfix. The alternative would be using another layout technique to achieve the columns. You could use display inline-block or flexbox