Roxy Roxy - 17 days ago 7
CSS Question

css3 @media queries for multiple browsers

I am following one tutorial about media and responsive patterns here:

http://www.w3schools.com/css/css_rwd_mediaqueries.asp

i have three different div containers like this:

<div>
<div class="customer">
<customer></customer>
</div>
<div class="dates">
Dates comes here
</div>
<div class="addressAndPhases">
Address and phases comes here
</div>
</div>


and css looks like:

@media only screen and (max-width: 500px) {
[class*=".customer,.dates,.addressAndPhases"] {
background-color: lightblue;
width:100%;
}
}

.customer{
float: left;
width: 27%;
height: 350px;
box-sizing: border-box;
padding: 15px;
}

.dates{
box-sizing: border-box;
float: left;
height: 350px;
width: 22%;
padding: 15px;

}

.addressAndPhases{

box-sizing: border-box;
text-align: center;
float: left;
height: 650px;
width: 22%;
padding: 15px;

}


i am expecting when width is smaller than 500px, background should be light blue but unfortunately it is not working like this.

Please help me with this.

Thanks.

Answer

As you really don't benefit from the asterisk *, you'll need to separate the classes in a list:

@media only screen and (max-width: 500px) {
    [class="customer"],[class="addressAndPhases"],[class="dates"] {
        background-color: lightblue;
        width:100%;
    }
}

Not really any benefit to use those selectors though:

@media only screen and (max-width: 500px) {
    .customer, .addressAndPhases, .dates {
        background-color: lightblue;
        width:100%;
    }
}

Also note that for this to work, you'd need to move this media query below the class definitions. Otherwise they would overwrite your setting.

Comments