CSS3 media queries

by Mohammed Ismail Ansari

HTML

<div id="navigation">
    Navi Panel
</div>

<div id="nice-div">
The machines rose from the ashes of the nuclear fire. Their war to exterminate mankind has raged for decades, but the final battle would not be fought in the future. It would be fought here, in our present. Tonight.
</div>

CSS

#navigation
{
    position: fixed;
    background-color: Green;
    top: 0px;
    width: 100%;
    height: 50px;
}

#nice-div
{
    margin-top: 50px;
    font-size: 16px;
}

@media (orientation:landscape)
{
    #navigation
    {
        left: 0px;
        width: 50px;
        height: 100%;
    }

    #nice-div
    {
        margin-top: 0px;
        margin-left: 50px;
    }
}

JavaScript

// CSS3 media queries