CODEWITHSUNDEEP
htmlcss
Farid Harja
Farid Harja

Reputation: 31

How to combine multiple device css to one class

i need to know it is possible to combine multiple device css to one class.

Normally we use like this:

*CSS side*

@media (max-width: 991px) { .padding-991 {padding-left: 300px;} }

@media (max-width: 767px) { .padding-767 {padding-left: 100px;} }

@media (max-width: 479px) { .padding-479 {padding-left: 500px;} }

*HTML side*

<div class="padding-991 padding-767 padding-479"></div>

Here example that i've testing but not work.

*CSS side*

.padding {

@media (max-width: 991px) {padding-left: 300px;}

@media (max-width: 767px) {padding-left: 100px;}

@media (max-width: 479px) {padding-left: 50px;}

}

*HTML side*

<div class="padding"></div>

So i need to know it is possible to combine multiple device css to one class.

Upvotes: 3

Views: 70

Answers (1)

Whimsy Cat
Whimsy Cat

Reputation: 410

You should like that.

@media (max-width: 991px) {
   .padding {
      padding-left: 300px;
   }
}

@media (max-width: 767px) {
   .padding {
      padding-left: 100px;
   }
}

@media (max-width: 479px) {
   .padding {
      padding-left: 50px;
   }
}

Upvotes: 3

Related Questions