Geek Answers Handbook

Html page layout not responding

I'm trying to make a page to respond to different browser resolutions, I noticed that I have to use media queries, but this does not work for me. I encoded css as normal with a pixel width> 900 and will look like the phone’s webpage when it is below it, but it will not respond when im decreases the resolution.

<!DOCTYPE html>
<html>
<head>
    <title>testing 2</title>
    <link type="text/css" rel="stylesheet" href="main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="body">
    <div id ="container">
        <header class="mainHeader">
            <content>
                <p>Page Title, Name,....
                </p>
            </content>
        </header>
        <nav class="leftNav">
            <ul>
            <li><a href="">Home</a></li>
            <li><a href="">body</a></li>
            <li><a href="">education</a></li>
            <li><a href="">project</a></li>
            <li><a href="">education</a></li>
            </ul>
        </nav>
        <div class="mainArticle">
            <article>
                <header>
                    <h2>This is the Main Title</h2>
                </header>
                <content>
                    <p>This is a standalone complete HTML5 and CSS3 
                </p>
            </content>
        </article>
    </div>
    <aside class="sideBar">
        <article>
            <h2>title for side</h2>
            <p> side bar contetnta asd asdasda </p>
        </article>
    </aside>
    <footer class="mainFooter">
        <p>Copyright &copy; </p>
    </footer>
</div>
</body>

and this is my css

body{
        /*color : blue;*/
        font-size:85%;
        font-family:Arial;
        text-align : left;
        background-color : #D0D0D0 ;
    }
    a{
        text-decoration:none;
    }
    @media screen and (max-width:900px){
    #container{
        width :70%;
    }
    .leftNav{
    width :100%;
    margin : 3% 0;
    }
    .mainArticle{
    width :100%;
    margin : 3% 0;
    }
    .sideBar{
    width :100%;
    margin : 3% 0;
    }
}
#container{
    width:100%;
    margin :0px auto;
}

.mainHeader {
    background-color : #666;
    height : 40px;
    border-radius :5px;
    margin : 2% 1%;
}
.mainHeader content p{
    padding : 10px 25px;
    color : #FFF;
}
.leftNav{
    float:left;
    width : 12%;
    background-color : #FFF;
    margin :0 0.5% 2% 2%;
    height:200px;
}

.leftNav ul li{
    margin : 5px;
    display:block;
}
.mainArticle{
float:left;
width: 58%;
background-color : #FFF;
    margin :0 0.5% 2% 0.5%;
height:200px;
}
.sideBar{
float:left;
width: 24%;
background-color : #FFF;
height:200px;
margin :0 2% 2% 0.5%;
}
.mainFooter{
background-color : #666;
height : 40px;
border-radius :5px;
margin : 5% 1%;
clear:both;
}
+4
source share
2 answers

Style sheets are ranked in order from top to bottom. The block #containerin yours @mediawill be evaluated on the screen <= 900px, but it will be redefined by another block #containerlater in the stylesheet. This is why media queries are usually placed at the end of a stylesheet.

+11
source

If you write css on the same id with a different property

#container{
    background: red;
}

#container{
    background: black;
}

He will choose the second

#container{
    background: black;
}

https://jsfiddle.net/82rpsyhk/3/

+1
source

More articles:


All Articles