I have a website that is responsive for mobile. On most devices it works fine but on the iPhone 11/11 pro the background is visible at the bottom of the page. After doing some research, it seems the CSS height property may be an issue. Suggested to use VH rather than % but after changing the HTML BODY to 100vh, it pushes all the content down (but no longer have the background visible at the bottom). See below - the red is the background color, the brown is the image.
All my content fits within the screen. Also - if I rotate the device in landscape then rotate back, then its perfect!
I think it is related to this 'notch' idea - https://css-tricks.com/the-notch-and-css/
HTML
<body class="bkground">
<div class="main">
<div class="wrapper">
<div class="content" role="main">
<div class="main-form-container">
<form id="auth-form" method="post" class="centered">
<!-- Content here -->
</form>
</div>
<div class="accept-connect-container">
<form method="post" class="accept-form">
<!-- Content here -->
</form>
</div>
</div>
</div>
</div>
CSS
@media (min-height: 640px) and (max-height:699px) {
html body {
height: 100%;
}
.wrapper {
background-image: url('../img/desktop-background.jpg');
background-repeat: no-repeat;
-webkit-background-size: fill;
-moz-background-size: fill;
-o-background-size: fill;
background-size: fill;
background-position: center;
background-color: #fff;
margin: 0;
padding: 0;
}
.main {
height: 100%;
}
.content {
width: 350px;
}
}
Aucun commentaire:
Enregistrer un commentaire