Instantly share code, notes, and snippets.

@masoomulhaqs masoomulhaqs/block-ui.css
Last active Aug 29, 2017

Embed
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>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment