CODEWITHSUNDEEP
cssmedia-queriesresponsiveness
Johnny
Johnny

Reputation: 103

CSS definitions - overwriting needed?

Essentially, I have to apply different margins (margin-right) to the last column of a row in different screen sizes. The flexbox works good so far. Following code that does the job:

* As we have three columns here, disable the right margin for every 3rd row*

.div1:nth-child(3n) {  
    margin-right: 0%;
}

@include media-query($desktop) {

/*** As we have two columns here, undo no-margin for every 3rd row ***/

    .div1:nth-child(3n) {  
        margin: 0 5% 3.33% 0;
     }

/*** Instead, apply it to every second now ***/

    .div:nth-child(2n) {  
        margin-right: 0%;
     }

}

@include media-query($mobile) {

/*** As each column is 100% width now, only apply bottom-margin. ***/   

     .div1:nth-child(3n) {  
         margin: 0 0% 5% 0;
     }

     .div1:nth-child(2n) {  
         margin: 0 0% 5% 0;
     }

}

Question: Do I really have to overwrite the global .div1:nth-child(3n) and .div:nth-child(2n) definition for the last two media queries or is there a more simple, better solution?

Upvotes: 1

Views: 45

Answers (1)

Carol McKay
Carol McKay

Reputation: 2424

Put your

.div1:nth-child(3n) {  
  margin-right: 0%;
}

Inside the desktop media query then the mobile won't need to know anything about it.

Upvotes: 1

Related Questions