How to combine multiple device css to one class

Farid Harja 0
Viewed 28

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.

css html
1 Answers

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;
   }
}
Jacob Roberto0
Related