Site icon Puneet Sharma – Freelance Web Developer

Portrait and landscape media queries for mobiles and ipads in CSS?

Portrait and landscape media queries for mobiles and ipads in css?
Portrait and landscape media queries for mobiles and ipads in css?

Here is Portrait and landscape media queries for mobiles and ipads in CSS.


CSS Media Query for Portrait Orientation

@media screen and (max-device-width: 767px) and (orientation: portrait) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

CSS Media Query for Landscape Orientation

@media screen and (max-device-width: 767px) and (orientation: landscape) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}
Exit mobile version