Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2017 17:43
What would you like to do?
Block UI in landscape mode
.block-ui__wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
Change colors accordingly
background: #000;
color: #fff;
@media (max-width: 767px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
.full-content__wrapper {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
.block-ui__wrapper {
This will work fine.
display: block;
However, here is some extra snacks for you.
To align everything in center.
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
<div class="block-ui__wrapper">
<p>Please change to portrait mode to further access our application</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment