Media Queries doesn't work

Question

Hello there!

I have trouble with my media queries in CSS. They doesn't seem to trigger. It's not the case with all the media queries, just with this particular one and it drives me nuts:

HTML look like this:

<div id="section1" class="sections"> <h3>Content will go here</h3> <img src="images/waterfall.jpg"/> <h4>There is this place</h4> <p>Lorem ipsum dolor sit amet..</p> </div>

and CSS looks like this:

@media (max-width: 1080px) { .sections p { font-size: 0.8rem; } }

Other media queries works properly, just this one fails to trigger....

ps. is there any way to pase a screenshot here?

Answer 1 · 2016-08-31T14:35:14Z

August 31, 2016 2:35pm

Your code is perfectly fine on my PC.

I've added 2 screenshots.

Screenshot1 -> browser size is less then 1080px wide
Screenshot2 -> browser size is more than 1080px wide

I can't seem to find the problem. I think it has something to do with the size of your browser window. Are you sure it is set to less than 1080px? I'm sorry, this is as far as my knowledge goes...

Answer 2 · 2016-08-31T10:02:52Z

August 31, 2016 10:02am

Hi Cezary,

Your code looks correct, so there is probably an other reason why it doesn't work correctly. Perhaps your screen size isn't big enough, or there are any other media queries overriding this one? If you post your complete code, I can take a look if you like. Check Markdown Cheatsheet for explanation of the way to post your code in comments. https://teamtreehouse.com/community/cheatsheet

Answer 3 · 2016-08-31T10:07:00Z

August 31, 2016 10:07am

Hello Robert,

first of all - thank you for your help :) I've double checked all of my media queries and it doesn't seem that something is overriding this particular media query.

I'm posting my complete code below (sorry if it's a little messy, it's my first month of coding and I'm still trying to make my code more transparent):

<!DOCTYPE html>
<html>
    <head>
        <title>My homework page</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="css/normalize.css"/>
        <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"/>
        <link rel="stylesheet" href="css/main.css"/>
    </head>
    <body>
        <header>
            <!-- NAVIGATION BAR AT MY PAGE -->
            <nav id="navigation">
                <ul id="nav">
                    <li><img src="icons/logo.png"/ class="logo"></li>
                    <li><a href="https://www.facebook.com/"><img src="icons/icon_facebook.png" class="icon"/></a></li>
                    <li><a href="https://twitter.com/?lang=pl"><img src="icons/icon_twitter.png" class="icon"/></a></li>
                    <li><a href="https://www.instagram.com/"><img src="icons/icon_instagram.png" class="icon"/></a></li>
                    <li><a href="https://www.snapchat.com/"><img src="icons/icon_snapchat.png" class="icon"/></a></li>
                    <li><a href="https://www.youtube.com/"><img src="icons/icon_youtube.png" class="icon"/></a></li>
                    <li class="menu current"><a href="#">About</a></li>
                    <li class="menu"><a href="#">Work with us</a></li>
                    <li class="menu"><a href="#">Blog</a></li>
                    <li class="menu"><a href="#">Shop</a></li>
                    <li class="menu"><a href="#">In the press</a></li>
                    <li class="menu"><a href="#">Contact</a></li>
                </ul>
            </nav>
            <!-- NAVIGATION BAR ENDS HERE -->
        </header>
        <div class="wrapper">   
            <!-- MAIN CONTENT -->
            <section>
                <div id="message">
                    <a href="mailto:czarekburzykowski@gmail.com"><img src="icons/message.png"/></a>
                </div>
                <div id="text">
                    <h2>Hey there little fella!</h2>
                    <h3>You 'll find here everything you need below</h3>
                    <img src="icons/arrow.png" id="arrow"/>
                    <h5 id="keep">Keep scrolling</h5>
                </div>
                <div id="section1" class="sections">
                    <h3>Content will go here</h3>
                    <img src="images/waterfall.jpg"/>
                    <h4>There is this place</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar elementum augue, vitae accumsan lacus consectetur vel. Mauris convallis erat vel dolor vulputate consequat. Morbi eu faucibus arcu, sodales ultrices tortor. Nulla ut bibendum orci. Nunc iaculis fringilla nulla vehicula placerat. Sed tristique in nibh a aliquam. Vivamus pharetra est velit. Ut consectetur mi vel feugiat mollis. Integer ornare ligula mattis, gravida elit et, sagittis urna. Etiam a laoreet turpis. Aliquam molestie nunc dolor, in ullamcorper arcu rhoncus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tempor felis in felis pulvinar, eget tincidunt turpis ornare.</p>
                </div>
                <div id="section2" class="sections">
                    <h3>Next content will go here</h3>
                    <img src="images/sunset.jpg"/>
                    <h4>That I go to</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar elementum augue, vitae accumsan lacus consectetur vel. Mauris convallis erat vel dolor vulputate consequat. Morbi eu faucibus arcu, sodales ultrices tortor. Nulla ut bibendum orci. Nunc iaculis fringilla nulla vehicula placerat. Sed tristique in nibh a aliquam. Vivamus pharetra est velit. Ut consectetur mi vel feugiat mollis. Integer ornare ligula mattis, gravida elit et, sagittis urna. Etiam a laoreet turpis. Aliquam molestie nunc dolor, in ullamcorper arcu rhoncus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tempor felis in felis pulvinar, eget tincidunt turpis ornare.</p>
                </div>
                <div id="section3" class="sections">
                    <h3>And here: there will be images and stuff</h3>
                    <img src="images/plane.jpg"/>
                    <h4>That nobody knows</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar elementum augue, vitae accumsan lacus consectetur vel. Mauris convallis erat vel dolor vulputate consequat. Morbi eu faucibus arcu, sodales ultrices tortor. Nulla ut bibendum orci. Nunc iaculis fringilla nulla vehicula placerat. Sed tristique in nibh a aliquam. Vivamus pharetra est velit. Ut consectetur mi vel feugiat mollis. Integer ornare ligula mattis, gravida elit et, sagittis urna. Etiam a laoreet turpis. Aliquam molestie nunc dolor, in ullamcorper arcu rhoncus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tempor felis in felis pulvinar, eget tincidunt turpis ornare.</p>
                </div>
                <div id="section4" class="sections">
                    <h3>And this will be final section</h3>
                    <img src="images/lake.jpg"/>
                    <h4>And the river flows</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar elementum augue, vitae accumsan lacus consectetur vel. Mauris convallis erat vel dolor vulputate consequat. Morbi eu faucibus arcu, sodales ultrices tortor. Nulla ut bibendum orci. Nunc iaculis fringilla nulla vehicula placerat. Sed tristique in nibh a aliquam. Vivamus pharetra est velit. Ut consectetur mi vel feugiat mollis. Integer ornare ligula mattis, gravida elit et, sagittis urna. Etiam a laoreet turpis. Aliquam molestie nunc dolor, in ullamcorper arcu rhoncus id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec tempor felis in felis pulvinar, eget tincidunt turpis ornare.</p>
                </div>
            </section>
        </div>  
            <!-- MAIN CONTENT ENDS HERE -->

            <!-- FOOTER -->
            <footer id="footer">
                <p>Copywright: C.B 2016<p>
            </footer>
            <!-- END OF FOOTER -->
    </body>
</html>

And CSS:

* {
    font-family: "Quicksand", sans-serif;
    list-style: none;

}


.wrapper {
    width: 90%;
    margin: 0 auto;
}

/** MENU BAR STYLING **/

header {
    text-align: right;
    height: 100px;
    background-image: linear-gradient(to left, #00ffcc, #33cccc);
    color: #fff;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

#nav .menu {
    display: inline;
    font-weight: 900;
    margin: 0 20px 20px 0;
    padding: 14px 10px 14px 10px;
    text-transform: uppercase;
    position: relative;
    bottom: 40px;
}

#nav a {
    text-decoration: none;
    color: #fff;
}

#nav .menu:hover {
    text-shadow: 1px 1px 1px #ffff80;
}

.current {
    border-bottom: 2px solid #ffff99;
}

/** USTAWIENIE POZYCJI ELEMENTÓW MENU **/



#nav .icon {
    display: inline-block;
    margin: 0 auto 20px;
    padding: 14px 20px;
    float: right;
    position: relative;
    bottom: 56px;
}


#navigation .icon {
    width: 20px;
    height: 20px;
    padding: 14px 5px;
    margin: 0 15px 0 0;
}

#navigation .logo {
    width: 60px;
    height: 60px;
    display: block;
    margin-top: 10px;
    margin-left: 40px;
    padding: 0 0;
    position: relative;
    top: 3px;
}


/** SECTIONS STYLING **/

#message {
    position: fixed;
    bottom: 50px;
    left: 20px;
}

#message img {
    width: 50px;
    height: 50px;
}

#keep {
    font-size: 1.1rem;
}
#text {
    text-align: center;
    margin: 200px 0 100px 0;
}

#arrow {
    margin-top: 30px;
    margin-bottom: 0;
    padding: 0;
    width: 30px;
    height: 30px;
}

#text p {
    position: relative;
    bottom: 20px;
}
.sections img {
    border-radius: 20px;
    width: 80%;
}


.sections {
    border: 3px solid #eff5f5;
    border-radius: 40px;
}

.sections:hover {
    border: 3px solid #ffff80;
    transition: all 2s;
}

#section1 {
    float: left;
    width: 45%;
    text-align: center;
    vertical-align: top;
    padding: 5px 10px;
    margin: 0 0 0 20px;
}

#section2 {
    float: right;
    width: 45%;
    text-align: center;
    vertical-align: top;
    padding: 5px 10px;
    margin: 0 20px 0 0;
}


#section3 {
    float: left;
    width: 45%;
    text-align: center;
    vertical-align: top;
    padding: 5px 10px;
    margin: 10px 0 0 20px;
    clear: both;
}


#section4 {
    float: right;
    width: 45%;
    text-align: center;
    padding: 5px 10px;
    margin: 10px 20px 0 0;
}

#footer {
    margin-top: 40px;
    padding: 30px 0px 30px;
    text-align: center;
    background-image: linear-gradient(to left, #00ffcc, #33cccc);
    clear: both;
    position: relative;
    top: 100px;
    color: #fff;
}



/** MEDIA QUERIES **/

@media (max-width: 1080px) {
    .sections p {
        font-size: 0.8rem;
    }
}


@media (max-width: 960px) {
    #nav .menu {
        font-size: 0.6rem;
    }
}

@media (max-width: 870px) {
    #nav .menu {
        font-size: 0.4rem;
    }

    #navigation .icon {
    width: 15px;
    height: 15px;
    position: relative;
    margin-top: 5px;
    }
}

Answer 4 · 2016-08-31T10:14:00Z

August 31, 2016 10:14am

Did you see the "/" after your src attribute in your first list element?

Answer 5 · 2016-08-31T10:23:56Z

August 31, 2016 10:23am

It works when I put your code in my own workspace. Are you sure that you adapt the size of you browser window to more/less than 1080px, to see the difference? Can you post a link to your workspace, so I can take a better look?

Answer 6 · 2016-08-31T11:17:00Z

August 31, 2016 11:17am

I'm pretty sure that I adapt size properly but here is a link to my workspace: https://teamtreehouse.com/workspaces/20358002#

ps. Thank you for spotting "/" after my src attribute I've already fixed that

Answer 7 · 2016-08-31T11:48:42Z

August 31, 2016 11:48am

Can you post your workspace by using the snapshot function?

Answer 8 · 2016-08-31T14:11:41Z

August 31, 2016 2:11pm

Sure: https://w.trhou.se/dyfgth6yjk

Welcome to the Treehouse Community

Looking to learn something new?

Cezary Burzykowski

Cezary Burzykowski

Media Queries doesn't work

8 Answers

robbertdekock

robbertdekock

Cezary Burzykowski

Cezary Burzykowski

robbertdekock

robbertdekock

Cezary Burzykowski

Cezary Burzykowski

robbertdekock

robbertdekock

robbertdekock

robbertdekock

Cezary Burzykowski

Cezary Burzykowski

robbertdekock

robbertdekock

Cezary Burzykowski

Cezary Burzykowski