Use different styles in one html

Question

How can i manage two differnt media queries

/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: landscape) {
}

@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape) {
    img{max-width: 8%;}
    .jumbotron{padding-top: 6px; padding-bottom: 2px;}
    .form-group{margin-bottom: 0;}
    .form-control{height: 28px; padding: 3px 6px;}
    .checkbox, .radio{margin-bottom: 1px; margin-top: 1px}
    label{margin-bottom: 0;}
    .btn{padding: 6px 10px; font-size: 12px;}
    body{font-size: 14px !important; line-height: 1.3;}
    .jumbotron{margin-bottom: 12px;}
}

I have one html for these two media query.When I try to add style value for 320x640 screen resolution . It is not working . But when I change 414x736 values it also changes 320x640 screen resolution style . How can I change 320x640 screen resolution style without change other 414x736 screen resolution style?

You have overlapping rules. I recommend you not mix min and max width with min max height. Simply use min or max with and then create your break points. More here: http://stackoverflow.com/questions/16443380/common-css-media-queries-break-points — Nathaniel Flick, Jan 31 '16 at 20:23

score 0 · Accepted Answer · answered Jan 31 '16 at 20:27

I think you have conflicting rules in your first media query. You have your device height set to a greater value than the device width, which would be 'portrait', but you also have the orientation set to 'landscape'. Either eliminate the landscape specification, or switch your width and height values.

If you end up switching the width and height values, you will also want to declare that media query second, since the width of 640px falls in the range of the other media query.

@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape) {
   //set styles here
}

@media screen
and (device-width: 640px)
and (device-height: 320px)
and (orientation: landscape) {
    //set styles
}

Use different styles in one html

1 Answers1