Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

My index.html page stays in a Three column layout when I resize it.

I'm doing the exercises How to Build a Website, and I'm up to the part where we build a Three column layout. In the portfolio page of my website. When I clear left in my gallery with the :nth-child, it fixes a minor problem with the layout and the text within the child. But that's it. When I resize it to a mobile size, it makes the gallery smaller like it should, but it stays in a three column grid. All my queries are in place. How do I make it into a one column layout, or two for tablet layouts?

8 Answers

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,417 Points

If you are taking a mobile first approach, you can use your media queries to target sizes for tablets and screens.

Use your non-media queried styles to create a one column layout, then override some of those styles with a media query for tablets to create a two column layout, and then again for screens to create a three column layout.

Your approach to creating multiple columns is up to you, but some of the lessons later on in this course should give you some ideas.

I already followed those instructions through the course. I made all the styles in the main.css file, then used media queries to enhance the tablet and desktop layouts. How can I show you my workspace?

```html/css media.css /******************************************** 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: 5px 0 0 0;
width: 100%; }

logo {

text-align: center; margin: 0; }

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

h2 { font-family: 'Open Sans', sans-serif; font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/******************************************** 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.75; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; 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: #949494; }

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

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

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

.contact-info { list-style: none; margin: 0; padding: 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; }

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

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

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

a { color: #6ab47b; }

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

/********** responsive.css****************/

@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(4n) {

clear: left; }

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

.profile-photo { float: left; margin: 0 5% 80px 0; }

}

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

}

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,417 Points

I've tried to take what you posted and convert it to markdown formatting. Could you confirm that I didn't miss anything?

On the assumption that I got it right, I've added a few inline comments about some weirdnesses that might be causing you some issues.

/******************************************** 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: 5px 0 0 0;
  width: 100%; 
}

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

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

h2 { 
  font-family: 'Open Sans', sans-serif; 
  font-size: 0.75em; 
  margin: -5px 0 0; 
  font-weight: normal; 
}

/******************************************** 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.75; 
  text-align: center; 
  clear: both; 
  padding-top: 50px; 
  color: #ccc; 
}

.social-icon { 
  width: 20px; 
  height: 20px; 
  margin: 0, 5px; /* NOTE: The comma here isn't necessary. You probably mean `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: #949494; 
}

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

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

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

.contact-info { 
  list-style: none; 
  margin: 0; 
  padding: 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; 
}

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

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

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

a { color: #6ab47b; }

nav a { color: #fff; } 

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

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

/********** responsive.css****************/

@media screen and (min-width: 480px) { 
/* NOTE: This two column layout gets started on some very small sizes.
   You may want to bump up the minimum width to something more like 768px. */ 

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

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

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

}

/******************************************** PAGE PORTFOLIO ********************************************/

#gallery li { width: 28.3333%; }

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

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

.profile-photo { 
  float: left; 
  margin: 0 5% 80px 0; 
}

} /* NOTE: This seems to be an extra, stray bracket */

@media screen and (min-width: 660px) { /* NOTE: You don't seem to have any styles within this one */

} 

You make use of the #primary and #secondary IDs in your first media query, but you don't do anything with them in the initial styles. If you aren't seeing a single column on phones, you might consider setting them to width: 100%;.

Yes, I fixed their is more to the second media queries. It probably didn't get copied when I sent it to you. It looks like this.

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

}

nav { background: none; float: right; font-size: 1.25em; margin-right: 5%; text-align: right; width: 45%;

}

logo {

float: left; margin-left; 5%; text-align: left; width: 45; }

h1 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #599a68 margin-bottom: 60px; }

}

I got rid of that coma in the main.css and that stray bracket in the responsive.css.

I also replaced the 480px 768px for the first media queries, nothing changed when I refreshed my website. All the small changes I did didn't affect the website at all.

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,417 Points

Could you try pasting the whole thing in using the Markdown formatting? It is really hard to read as it is.

If you're having trouble with markdown, please use codepen and post a link.

With codepen it only lets me put the html and css on two windows. I can't seem to find how to place my other html their to check it. For markdown, how can I make my code readable? I want to place it inside a black background with colored readable code like you have. The three ticks don't work too well for me.

I have fixed most of my website but only a few minor things like when I resize my browser to view the website in a mobile layout it shrinks my header. I can't figure out a way to fix this.

By the way thank you for your support. I have fixed many problems because of your help.

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,417 Points

If your multiple column layout issue has been solved, please mark this question as solved. You should open up a new question for any additional issues you have.

We really only need to see one html file to diagnose what you're doing. So, just put the problem html file up there. If all of your html files have the same problem, just choose one. Codepen is the best choice for getting help in a problem like this.

To display html in markdown do this:

    ```html
    <!-- put the contents of one html here, like this: -->

    <!DOCTYPE html>
    <html>
      <head> <!-- use more spaces to indent -->
        <title>My Page Title</title>
      </head>
      <body>
      </body>
    </html>
    ```

To display css in markdown, do this:

    ```css
    /* put the contents of one css file here, like this: */

    p { color: blue; }
    a {
      color: white; /* again, use more spaces to indent */
      background-color: red;
    }
    ```

I actually still have column layout problems. The text in my gallery in my index.html doesn't shrink with the rest of the layout. It stays one size making the layout pretty awkward. The only thing I solved was making the columns correspond. Not the content so much. And my heading logo acts real abnormal when I resize the website to a mobile size screen. It actually shrinks dramatically.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Otto Mejia | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>  
      <a href="index.html" id="logo">
        <h1>Otto Mejia</h1> 
        <h2>Designer</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/number-01.jpg">
            <img src="img/numbers-01.jpg" alt="">
            <p>Experimentation with color and texture.</p>
          </a>
        </li>
        <li>
          <a href="img/number-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Playing with blending modes in Photoshop.</p>
          </a>
        </li>
        <li>
          <a href="img/number-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/number-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
          </a>
        </li>
        <li>
          <a href="img/number-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
             <p>Creating shapes using repitition.</p>
              </a>
            </li>
          </ul>
        </section> 
        <footer>
            <a href="https://twitter.com/Otto__me" target="_blank">
            <img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
            <a href="http://ottosportfolio.squarespace.com" target="_blank">
            <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
        <p>&copy; 2015 Otto Mejia</p>
       </footer>
      </div>
    </body>
</html>

Here's my codepen version. I only put my html and my css. not the others. Hope I'm doing this right.

http://codepen.io/ottome95/pen/XJawVg?editors=110

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,417 Points

It looks like you've declared the font-size of your #gallery li a p elements in your base styles too big. Two quick fixes come to mind:

Fix No. 1 (recommended)

In your base styles, change the font-size to something more reasonable for a mobile device. Then, in your media queries add additional styles to optimize the experience on larger devices.

You could change your initial style to this:

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 1em; /* Use to be 1.75em */
  color: #949494;
}

And add to an existing media query or create a new one later on with this:

@media (min-width: 768px) { /* only on devices 768px wide or bigger */
  #gallery li a p { /* select your paragraph elements in your gallery at the same specificity they were selected earlier */
    font-size: 1.75em; /* size up to your original settings */
  }
}

This approach is recommended because it follows the mobile first approach.

Fix No.2 (not recommended)

Use a media query to scale the font-size smaller on small devices.

@media (max-width: 768px) { /* only on devices smaller than 768px wide */
  #gallery li a p { /* select your paragraph elements in your gallery at the same specificity they were selected earlier */
    font-size: 1em; /* size 'em down to 1em */
  }
}

Ok, thank you so much. I'll try these out to see how it comes out. I have most of my website done thanks to you. Sorry for constantly asking questions, but I'm new to this. I want to get a job as a web developer. How likely is one to find a job in this field?

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,417 Points

I'm glad I could help!

If you are looking to get a job as a web developer, you'll benefit from a strong understanding of front end development (e.g., JavaScript, HTML, CSS) and a back end programming language (like Ruby, Python, PHP, GO, and the .NET framework). Most importantly, you'll need to get involved in the development community and develop a portfolio of projects.

Good luck!

Thanks for your help again. How likely is one to find a decent job through treehouse? I know treehouse takes 6 months to a year to learn, but how well does it really help you find a job. Did you find your current job through the website?

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,417 Points

This would be a perfect candidate for a new question on the forum!

I'm a freelance designer and frontend developer. I haven't gotten any leads through Treehouse, but more opportunities are always good.

doing either is a viable option. But did you start your career through a school or other program?