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

Posted September 24, 2014 6:13pm by

Stuck on Building a Three Column Layout

I am following along with Nick on the Web Design Track. Every time I add the If-Then statement for resolutions wider than 660px, my whole display gets messed up. Can someone look over this portion of code and tell me what the problem is?

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

    /*******************************************************
    HEADER
    ********************************************************/

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

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

    h1 {
        font-size: 2.5em;
    }

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

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

}

September 24, 2014 6:15pm

I changed your post to add syntax highlighting. :)

September 24, 2014 6:25pm

What happens to your display when you change things to this size? And what device are you viewing it on? It's hard to really see what's going on w/o knowing what your html code looks like.

September 24, 2014 6:55pm

I am seeing the presentation on my iPad, but I am following along with Workspaces on my Windows laptop and Firefox..

Before I add that section of code, my page looks like Nick's. After I add the code, the squeezed display still looks fine, but when I expand the window, my entire header basically goes away. All I see is white with the navigation anchor in black (the text is colored because it is the selected page).

September 24, 2014 6:57pm

Here is my main.css

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

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

a   {
    text-decoration: none;
}

img {
    max-width: 100%
}

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

h3 {
    margin: 0 0 1em 0;
}


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

header {
    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 size: 0.75em;
    margin: 0 0 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.75em;
    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 p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;
}



/*******************************************************
Page Portrait
********************************************************/

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



/*******************************************************
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('../images/phone.png');
}

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

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



/*******************************************************
Colors
********************************************************/

a {
    color: 6ab47b;
}


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

/* Logo Text */
h1, h2 {
    color: #fff;
}

/* Nav Background on Mobile */
nav {
    background: #599a68
}

/* Nav Link */
nav a, nav a:visited {
    color: #fff
}

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


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

September 24, 2014 6:59pm

Maybe try adding this meta tag to your header before trying to tweak anything else:

<meta name="viewport" content="width=device-width">

September 24, 2014 7:09pm

I gave that a shot, but it didn't change anything. I am wondering if the problem is how my <nav> list is fixed into my <body>. This is what I have for that section of my index.html:

 <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Jeff Hoffman</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="images/numbers-01.jpg">
                            <img src="images/numbers-01.jpg" alt="">
                            <p>Experimentation with Color and Texture.</p>
                        </a>
                    </li>
                    <li>
                        <a href="images/numbers-02.jpg">
                            <img src="images/numbers-02.jpg" alt="">
                            <p>Playing with Blending Modes in Photoshop.</p>
                        </a>
                    </li>
                    <li>
                        <a href="images/numbers-06.jpg">
                            <img src="images/numbers-06.jpg" alt="">
                            <p>Trying to Create an 80's Style of Glows.</p>
                        </a>
                    </li>
                    <li>
                        <a href="images/numbers-09.jpg">
                            <img src="images/numbers-09.jpg" alt="">
                            <p>Drips Using Photoshop Brush.</p>
                        </a>
                    </li>
                    <li>
                        <a href="images/numbers-12.jpg">
                            <img src="images/numbers-12.jpg" alt="">
                            <p>Creating Shapes using Repetition.</p>
                        </a>
                    </li>
                </ul>
            </section>
            <footer>
                <a href="http://twitter.com/nickrp"><img src="images/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
                <a href="http://facebook.com/nickpettit"><img src="images/facebook.png" alt="Facebook Logo" class="social-icon"></a>
                <p>&copy; 2014 Jeff Hoffman.</p>
            </footer>
        </div>
    </body>

September 24, 2014 7:25pm

Hmmm.... it's still difficult to ascertain where the issue lies, w/o being able to see the html. Maybe you could just post a link to your work... (And remember to post your links like this: "[example link]" followed by your url in parenthesis"(http://example.com/)"-- and exclude the quotation marks, lol.)

September 24, 2014 7:27pm

Do you mean to the Workspaces test display:

"http://web-gn728cxgi1.treehouse-app.com/index.html"

September 24, 2014 7:35pm

Oh yeah, I see what you mean: at about 659px wide, your header collapses. One solution would be specify a min-height for your header. ie

header {
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
min-height: 50px; /*ding ding*/ 
}

September 24, 2014 8:04pm

Added syntax highlighting to your comments. And, just for future reference on how to post code in the forums, I'll link to this post.

September 24, 2014 8:26pm

Okay, the min-height seemed to fix the problem. I am not certain if it is exactly what Nick would have done, but it is good enough for me. Thanks for you guys' help.

1 Answer

September 24, 2014 9:00pm

Hi Jeff,

You seem to be missing float: left; in your header rule in main.css

I believe the header was floated early on in the project in anticipation of later floating the nav and logo at the 660px media query.

This was done to keep it from collapsing.

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

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Jeff Hoffman

Jeff Hoffman

Stuck on Building a Three Column Layout

Ryan Duchene

Ryan Duchene

Becky Castle

Becky Castle

Jeff Hoffman

Jeff Hoffman

Jeff Hoffman

Jeff Hoffman

Becky Castle

Becky Castle

Jeff Hoffman

Jeff Hoffman

Becky Castle

Becky Castle

Jeff Hoffman

Jeff Hoffman

Becky Castle

Becky Castle

Ryan Duchene

Ryan Duchene

Jeff Hoffman

Jeff Hoffman

1 Answer

Jason Anello

Jason Anello