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 Styling Web Pages and Navigation Style the Portfolio

2 column layout is not displaying properly

When I scale the browser down to the mobile version, I get two columns but they do not sit next to each other. I can't figure this out.

<!DOCTYPE html>
<html>
    <!--contains meta information-->
    <head>
        <meta charset="utf-8">
        <title>Louis Espinoza | Portfolio</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>

    <body>

        <header>
            <a href="index.html" id="logo">
                <h1>Louis Espinoza</h1>
                <h2>Portfolio</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">
                    <a href="img/numbers-01.jpg">
                        <li><img src="img/numbers-01.jpg" alt=""></li>
                        <p>Experimentation with color and texture.</p>
                    </a>

                    <a href="img/numbers-02.jpg">
                        <li><img src="img/numbers-02.jpg" alt=""></li>
                        <p>Playing with blending modes in photoshop.</p>
                    </a>

                      <a href="img/numbers-06.jpg">
                        <li><img src="img/numbers-06.jpg" alt=""></li>
                        <p>trying to create an 80's  style of glows.</p>
                    </a>

                    <a href="img/numbers-09.jpg">
                        <li><img src="img/numbers-09.jpg" alt=""></li>
                        <p>Drips created using photoshop brushes.</p>
                    </a>

                    <a href="img/numbers-12.jpg">
                        <li><img src="img/numbers-12.jpg" alt=""></li>
                        <p>creating shapes using repetition.</p>
                    </a>
                </ul>
            </section>

            <footer>
                 <a href="https://twitter.com/Louis_Espinoza1"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
                 <a href="https://www.facebook.com/profile.php?id=100009123028980"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
                 <p>&copy; 2015 Louis Edward Espinoza</p>
           </footer>
       </div>    
    </body>
</html>
/***************************
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%;   
}




/***************************
Heading
***************************/

#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-size:0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}


/***************************
Navigation 
***************************/

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



/***************************
Footer
***************************/

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


/***************************
Page: Portfolio
***************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

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




/***************************
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;   
}

6 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,241 Points

I don't see any media queries in your CSS. Is it in a different file? If so, it's not linked inside your <head> tags, so that might be the reason.

yes, what Ryan said. In order to get your layout to change based on window size, you want to use media queries (@media). These contain a different set of styling based on parameters you include in the queries.

Media queries are If/Else statements you can include in your CSS. You use them to change how your page is laid out responsively to different size windows. They are kind of an integral part of modern CSS, so it's worth taking some time to get to know them.

Here's an article about them. http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

And here's a treehouse video. https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=intro%20to%20media%20queries

Douglas Berg
Douglas Berg
9,237 Points

At this point in the project there are no media queries as only the "mobile" version of the site has been completed. I'm at the same point and have the same problem. The layout is based on a max width and the columns are supposed to be derived from the 45% width and float left properties on the un-ordered list. However, when following along with the video the output doesn't seem to match.

Having the same troubles, well put Douglas.

I'm sorry I am not quite to sure what media queries are?

Thanks for the response and info.