Orientation: landscape is not working in mediaquery and even if it get applied it's being applied it's target all other big screens too

HTML-CSS
1

mediaQueries: {

smallest:

  "only screen and (min-width: 280px) and (max-width: 319px) and (orientation: portrait)",

smaller:

  "only screen and (min-width: 320px) and (max-width: 331px) and (orientation: portrait)",

small:

  "only screen and (min-device-width: 332px) and (max-device-width: 401px) and (orientation: portrait)",

medium:

  "only screen and (min-width: 402px) and (max-width: 481px) and (orientation: portrait)",

large:

  "only screen and (min-width: 482px) and (max-width: 601px) and (orientation: portrait)",

larger:

  "only screen and (min-width: 602px) and (max-width: 769px) and (orientation: portrait)",

largest:

  "only screen and (min-width: 770px) and (max-width: 901px) and (orientation: portrait)",

xLarge:

  "only screen and (min-width: 902px) and (max-width: 1081px) and (orientation: portrait)",

xxLarge:

  "only screen and (min-width: 1082px) and (max-width: 1201px) and (orientation: portrait)",

},

landscape_mediaQueries: {

smallest:

  "only screen and (min-width: 280px) and (max-width: 319px) and (orientation: landscape)",

smaller:

  "only screen and (min-width: 320px) and (max-width: 331px) and (orientation: landscape)",

small:

  "only screen and (min-width: 332px) and (max-width: 401px),handheld and  and (orientation: landscape)",

medium:

  "only screen and (min-width: 402px) and (max-width: 481px) and (orientation: landscape)",

large:

  "only screen and (min-width: 482px) and (max-width: 601px) and (orientation: landscape)",

larger:

  "only screen and (min-width: 602px) and (max-width: 769px) and (orientation: landscape)",

largest:

  "only screen and (min-width: 770px) and (max-width: 901px) and (orientation: landscape)",

xLarge:

  "only screen and (min-width: 902px) and (max-width: 1081px) and (orientation: landscape)",

xxLarge:

  "only screen and (min-width: 1082px) and (max-width: 1201px) and (orientation: landscape)",

},

2

Here’s a good read on why you don’t need device specific breakpoints.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.