CODEWITHSUNDEEP
csssass
user10415043
user10415043

Reputation:

SASS not compiling in media query order

So I've made the following mixins and using them in the particular order, but they do not work as intended to.

@mixin mediaX {
  @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3) {
    @content;
  }
}

//iPhone 6,7,8
@mixin media6 {
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) {
    @content;
  }
}

//iPhone 6,7,8 Plus
@mixin media6Plus {
  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) {
    @content;
  }
}

//iPhone 5 and 5S
@mixin media5 {
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    @content;
  }
}

and usage is following 

@include mediaX {
  .navigation {
    text-align: justify;
  }
}

@include media6Plus {
  .navigation {
    text-align: justify;
  }
}

@include media6 {
  .navigation {
    text-align: justify;
  }
}

@include media5 {
  .navigation {
    text-align: left;
  }
}

It appears that only media5 is only reflecting, can someone explain what is wrong and why it is working like this?

Upvotes: 1

Views: 425

Answers (1)

Yash009
Yash009

Reputation: 533

There is a conflict in rules based on the screen sizes in your above media queries. Hence the last one is the only rule that is getting applied by default. I have never written a media query based on the device I usually write it base on screen size. Make sure you write media query based on screen sizes and not based on devices as media query can only pick on screen sizes and not devices.

Make media queries like these.

//screen size 1200px and above
@mixin media6 {
    @media only screen and (min-device-width: 1200px) {
        @content;
        }
    }
//media query between 1200px and 992px
@mixin media6Plus {
  @media only screen and (min-device-width: 992px) and (max-device-width: 
  1199px) {
    @content;
  }
}

And then use them like this 
@include media6 {
  .navigation {
    text-align: justify;
  }
}

@include media6Plus {
  .navigation {
    text-align: left;
  }
}

Upvotes: 2

Related Questions