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 CSS Layout Techniques Float Layout Creating a Horizontal Menu

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Media Query

Hello!

This code is from the layout course in CSS layout. If you run it, and narrow the viewport to check the effect of media query, you will see that it doesnt work. What is missing so that I can see the effect of my media query code in a narrow viewport. FYI, I didnt change the orginal code.

thanks

<!DOCTYPE html>
<html>
<head>
    <title>Floats</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/normalize.css">
    <style>
    * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,
body{
    height: 100%;
}
body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}

/* Layout Element Colors
================================ */

.main-header       { background-color: #384047; }
.main-logo a       { background-color: #5fcf80; }
.main-nav a        { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout
================================ */

.main-wrapper {
    width: 90%;
    margin: auto;
}
.main-header {
    min-height: 100px;
    padding: 15px;
}
.main-logo,
.main-nav li {
    float: left;
}
.main-nav li {
    margin-top: 15px;
    margin-right: 10px;
    margin-left: 10px;
}
.main-logo {
    margin: 0 50px 0 0;
}
.main-logo a, 
.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 5px 15px;
    border-radius: 5px;
}
.main-banner {
    background: #dfe2e4;
    text-align: center;
    padding: 35px 15px;
}
.main-footer {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Column Layout
================================ */

.col {
    padding: 20px;
}

/* Media Queries
================================ */

@media (max-width: 768px) {
    .main-wrapper,
    .main-nav li, 
    .main-logo {
        width: initial;
        height: initial;
    }
    .main-logo {
        margin-right: 0;
    }
    .extra-content {
        display: none;
    }
}



    </style>
</head>
<body>
    <div class="main-wrapper">
        <header class="main-header">
            <h1 class="main-logo"><a href="#">Logo</a></h1>
            <ul class="main-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </header>
<!--        <div class="main-banner">
            <h1>This is the Main Banner Heading</h1>
            <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>
        </div> -->
        <div class="content-row">
            <div class="primary-content col">
                <h2>Primary Content</h2>
                <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
                <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
            </div>
            <div class="extra-content col">
                <h3>Extra Content</h3>
                <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
                <hr>
                <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
            </div>
            <div class="secondary-content col">
                <h3>Secondary Content</h3>
                <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
                <hr>
                <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
            </div>
        </div>
        <footer class="main-footer">
            <p>&copy;2014 Example Layout</p>
        </footer>
    </div>
</body>
</html>

5 Answers

Mark Josephsen
Mark Josephsen
8,803 Points
Mark Josephsen
Mark Josephsen
8,803 Points

Your media query is working. Unfortunately it doesn't look so great, but you'll notice that there is, in fact, a change in the layout when you narrow it below 768px. It's easier to see it working if you add something like this inside your media query: .main-header { background: orange; }

raymond dustin
raymond dustin
4,739 Points
raymond dustin
raymond dustin
4,739 Points

Hi I am far from an expert but to me it looks like you need to define your media.....

@media screen and (max-width: 768px)

orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello,

Do you mean I should write it like this: @media screen(max-width:768px){.....}

But when I write it like that everything stops working. All the lists start to wrap up like inline elements.

thanks

Mark Josephsen
Mark Josephsen
8,803 Points
Mark Josephsen
Mark Josephsen
8,803 Points

You're leaving out the "and". It's @media screen and (max-width:768px){.....} It doesn't work if you leave off the "and". However, the media query you originally posted does work. See my comment below.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Mark,

Yes, I got your last message, but this doesnt display on my browser or it doesnt work. However it now wokds because I added: @media screen and(..). But the orginal code does not use 'screen and'. Thank you for helping me solve this one big problem.

Just one more question, would you happen to know how I can align all the lists with the logo. When I narrow the viewport, there is this undesirable left margin.

Here is a revised version:

<!DOCTYPE html>
<html>
<head>
    <title>Floats</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/normalize.css">
    <style>
    * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html,
body{
    height: 100%;
}
body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}

/* Layout Element Colors
================================ */

.main-header       { background-color: #384047; }
.main-logo a       { background-color: #5fcf80; }
.main-nav a        { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout
================================ */

.main-wrapper {
    width: 90%;
    margin: auto;
}
.main-header {

    padding: 15px;
}
.main-logo,
.main-nav li {
    float: left;
    list-style-type:none;
}
.main-nav li {
    margin-top: 15px;
    margin-right: 10px;
    margin-left: 10px;
}
.main-logo {
    margin: 0 50px 0 0;
}
.main-logo a, 
.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 5px 15px;
    border-radius: 5px;
}
.main-banner {
    background: #dfe2e4;
    text-align: center;
    padding: 35px 15px;
}
.main-footer {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Column Layout
================================ */

.col {
    padding: 20px;
}

/*Clear fix
===================================*/
.group::after{
content:"";
display:table;
clear:both;


}
/* Media Queries
================================ */

@media screen and (max-width:768px)
    {

    .main-nav li,
    .main-nav,
    .main-logo,
    .col,
    .feat-img
    {

    height:initial;
    width:initial;
    margin:initial;
    float:initial;
    display:block;



    }
    .main-logo{
    margin-right:0;

    }
    .feat-img{
    width:100%;
    }
    .extra-content{
    display:none;

    }
    .main-nav li{
    margin-top:7px;
    margin-left:0;

    }



    }

    </style>
</head>
<body>
    <div class="main-wrapper">
        <header class="main-header group">
            <h1 class="main-logo"><a href="#">Logo</a></h1>
            <ul class="main-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </header>
<!--        <div class="main-banner">
            <h1>This is the Main Banner Heading</h1>
            <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>
        </div> -->
        <div class="content-row">
            <div class="primary-content col">
                <h2>Primary Content</h2>
                <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
                <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
            </div>
            <div class="extra-content col">
                <h3>Extra Content</h3>
                <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
                <hr>
                <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
            </div>
            <div class="secondary-content col">
                <h3>Secondary Content</h3>
                <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
                <hr>
                <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
            </div>
        </div>
        <footer class="main-footer">
            <p>&copy;2014 Example Layout</p>
        </footer>
    </div>
</body>
</html>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi orange sky,

the extra space you have on the left before your list items is a 40px left padding on the ul that the browser applies in its stylesheet. At least firefox does this.

Inside your media query you can add this:

.main-nav {
        padding-left: 0;
      }

Then your nav should take up as much width as your h1.

raymond dustin
raymond dustin
4,739 Points
raymond dustin
raymond dustin
4,739 Points

It looks like you are picking up margins or padding from the .main-logo being an h1 tag.

Give this a try......

/* Media Queries ================================ */

@media screen and (max-width:768px) {

*{
    margin:0;
    padding:0;
}
orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thanks all for you help. Now, I see why the lists were not aligned, that padding... thanks Jason!