I have set a background photo to take up 100% of the height.
However, when I view the site on a mobile phone in landscape mode using Chrome or Firefox, the background image does not fill the entire space.
In desktop and portrait mobile modes, everything looks fine. The issue only occurs in landscape mode.
I want the content to adjust to the viewport in landscape mode. How can I achieve this?
https://i.sstatic.net/aLQhS.png MOBILE: PORTRAIT MODE, NO ISSUES.
https://i.sstatic.net/YzSd0.png MOBILE: LANDSCAPE MODE, Content overflows main div.
Please open the Snippet in the browser console or use a cell simulator in landscape mode to see the problem.
body, html {
height:100%;
padding:0;
margin:0;
}
.block {
height: 100%;
width: 100%;
text-align: center;
background: black;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
margin-top: 10%;
display: inline-block;
vertical-align: middle;
max-width: 500px;
background: white;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}<div class="block">
<div class="centered">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" class="img-responsive" id="img_logo">
<p style="color: black"> <a style="font-size:35px;"> xxxxxx</a> <br><br>text text <br> address <br> </p>
</div>
</div> I attempted to remove .block:before and added:
@media(orientation: landscape){
.background-image {
min-height: 200%;
}
}
However, this change affected both mobile and desktop modes. I specifically need it to work only on mobile devices.