CODEWITHSUNDEEP
cssresponsive-design
user3263155
user3263155

Reputation: 203

CSS3 media not working

im trying to mimic example from this page http://learnlayout.com/media-queries.html ... it should do two things after resizing to small...
1.) make LI elements INLINE.... this works for me
2.) make NAV and sections ONE COLUMN... this doesnt work for me, see picture enter image description here
here is code 

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vajcia</title>
</head>
<style>
body
{
    margin: 0 0;
}
#container
{
    box-sizing:border-box;
    width: 100%;
    border: 5px solid green;
}
section
{
    border: 2px solid yellow;
    margin-left: 200px;
}
nav{

    background-color: red;
    width:200px;
    box-sizing:border-box;

    /*position: absolute;
    top:0;
    left:0px;*/
    float:left;
}
@media screen and (min-width:600px) {
    nav {
        float: left;
        width: 25%;
    }
    section {
        margin-left: 25%;
    }
}
@media screen and (max-width:599px) {
    nav li {
        display: inline;
    }
}

</style>
<body>
    <div id="container">
        <nav>
            <ul>
                <li>Home</li>
                <li>Taco</li>
                <li>Hours</li>
                <li>Contact</li>
                <li>About</li>
                <li>Hovno</li>
            </ul>
        </nav>      
        <section>
            The margin-left style for sections makes sure there is room for the nav. Otherwise the absolute and static elements would overlap
        </section>
        <section>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
        </section>
        <section>
            Notice what happens when you resize your browser. It works nicely!
        </section>
    </div>

    </body>
    </html>

Upvotes: 2

Views: 57

Answers (2)

Richard Peck
Richard Peck

Reputation: 76774

You'll want to do something like this:

http://jsfiddle.net/wFtJ4/

body {
    margin: 0 0;
    margin-bottom: 120px;
}
#container {
    box-sizing:border-box;
    width: 100%;
    border: 5px solid green;
}
section {
    border: 2px solid yellow;
    margin-left: 200px;
}
nav {
    background-color: red;
    width:200px;
    box-sizing:border-box;

        /*position: absolute;
    top:0;
    left:0px;*/
    float:left;
}
@media screen and (max-width:599px) {
    nav li  { display: inline; }
    nav     { width: 100%; text-align: center; }
    section { margin-left: 0 !important; }
}

Your CSS is a bit haphazard, so I hope this shows you have to override some of your settings when you use @mediaqueries ;)

Upvotes: 1

Aur&#233;lien Grimpard
Aur&#233;lien Grimpard

Reputation: 964

If you want one column for your nav (red ?) then you need to remove its float and its width.

@media screen and (max-width:599px) {
    nav li {
        display: inline;
    }
    nav {
        float: none;
        width: auto;
    }
}

Upvotes: 1

Related Questions