CODEWITHSUNDEEP
htmlcssmedia-queries
lesnar
lesnar

Reputation: 2480

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.

Upvotes: 1

Views: 112

Answers (5)

Johannes
Johannes

Reputation: 67728

Why don't you just write it like this:

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

Upvotes: 1

Mackan
Mackan

Reputation: 6271

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.

Upvotes: 2

Tyler Roper
Tyler Roper

Reputation: 21672

Your CSS is out of order. Even if your selector was right for your media query, CSS will abide by the most "recent" declaration. (assuming they're all of equal specificity)

Because you're declaring your "500px and below" styles before your default styles, they will be overwritten.

This, and the syntactical issues that the others have pointed out, are combining to form your issue. See below:

.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;

}


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

Upvotes: 2

srinivas.ln
srinivas.ln

Reputation: 309

replace to this .customer,.dates,.addressAndPhases{ } i think class* wont work for multiple classes, 

@media only screen and (max-width: 900px) {
    .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;

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

Upvotes: 1

croban
croban

Reputation: 447

This is an attribute css selector

[class*=".customer,.dates,.addressAndPhases"]

this would mean that you want to select all html tags which looks like:

<html_tag class=".customer,.dates,.addressAndPhases">

because of that you can not use "," as separator between different class names. you have to separate those attributes selectors

[class="customer"], [class="dates"], [class="addressAndPhases"]

Upvotes: 1

Related Questions