'width doesnt change in a media query rest of the properties change

At first the container is given a width of 80% and when this is changed with a media query for a width of 992px it does not change but when the background-color is specified for the same media query it changes. JSfiddle - https://jsfiddle.net/q4hqq2ro/

HTML

<div class="container">
        <header>
            <div class="logo"></div>
            <h1 > <span class="light">Spirituality</span> Forums</h1>
            <div class="register user">Register</div>
            <div class="login user">Login</div>
            <span class="close">X</span>
            <div class="search-icon"><a href=""></a></div>
            <input type="search" class="search">
            <div class="clear"></div>
        </header>

        <div class="advertisment">
        </div>
        </div> <!-- container -->

CSS

    @import url(http://fonts.googleapis.com/css?family=Niconne);

    body{
        background: #e6e3d7;
        font-size: 16px;
    }

    /*-----------------Header----------------------*/


    .container{
        max-width: 80%;
        margin:0 auto;
    }

    header{
        background-color: #b47941;
        padding-left: 1%;
        margin: 0 auto;
        display: block;
    }

    .logo{
        background: url("images/small.jpg") no-repeat;
        width: 150px;
        height:90px;
        float: left;
    }

    header h1 {
        display: inline-block;
        font:200% cursive ;
        color: white;
        line-height: 90px;
        margin-left: 2%;
        color: #daccb7;
        z-index: 2;
    }

    .light{
        color: #f5f3ea;
    }

    .clear{
        clear: both;
        display: inline-block;
    }

    /*---------------register-------------*/

    .register{
        margin-left: 2%;
        margin-right: 2%;
    }

    .user{
        display: inline-block;
        float: right;
        color: white;
        margin-top: 62px;
        background: #e6e3d7;
        width:10%;
        font: 100%/160% arial;
        text-align: center;
        color: #a35800;
        line-height: 187%;
        cursor: pointer;
    }

    /*---------------search-------------*/
    .search{
        display: none;
        position: absolute;
        margin-top: 64px;
        right: 30%;
        width: 18%;
        height: 26px;
    }

    .close{
        color: grey;
        position: absolute;
        top: 68px;
        right: 30%;
        display: none;
        z-index: 2;
        cursor: pointer;
        background: #e6e3d7;
        width: 2%;
    }

    input[type="search"]{
        border: 0;
        color: #a35800;
        background: #e6e3d7;
        padding: .5%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;  
        box-sizing: border-box;
        font-size: 100%;
    }

    .search-icon{
        background:url("images/search.gif") no-repeat;
        width:32px;
        height:23px;
        display: inline-block;
        float: right;
        margin-right: 2%;
        margin-top: 66.5px;
        cursor: pointer;
    }

    /*-----------advertisment------------*/

    .advertisment{
        height: 320px;
    }

    /*-----------Media Queries----------*/

     @media (max-width : 992px) {

        .container {
            width: 90%;
            background: green;
        }

    }
cssmedia-queries


Solution 1:[1]

The problem is that you set before:

.container{
  max-width: 80%;
  margin:0 auto;
}

And the media query does not override that. I tested your code, replace either the max-width with just width on the previous line, or use max-width: 90% on the media query. That would do the trick.

Cheers.

Solution 2:[2]

width and max-width are different properties. If you want to deactivate max-width you have to override it to it's initial value of none so width will be the only property that will affect element's width.

.container {
    max-width: none;
}

Reference: MDN - max-width

Solution 3:[3]

you can use max-width in place of width ,it will work. in media query width is the only properties that affect.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Raushan

Related Questions