I have a photo background on my site using background-size:cover
. It works for the most part but leaves a weird ~30px white space on my Galaxy S3 in portrait mode.
I've attached a screenshot. The 1px teal line is to illustrate the entire screen. Seems like the background stops right after the social media ul
s.
I tested this by removing the ul
and the background attached it self to the bottom of the tagline text.
Also, here's my CSS pertaining mobile portait view:
@media only screen and (max-width: 480px) {
.logo {
position: relative;
background-size:70%;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
margin-top: 30px;
}
h1 {
margin-top: -25px;
font-size: 21px;
line-height: 21px;
margin-bottom: 15px;
}
h2 {
font-size: 35px;
line-height: 35px;
}
.footer_mobile {
display: block;
margin-top: 20px;
margin-bottom: 0px;
}
li {
display: block;
font-size: 1.3em;
}
This used to not happen, but I guess I accidentally bugged it while trying to solve another issue.
This works on Android 4.1.2 and iOS 6.1.3 (iPhone 4) and switches for desktop. Written for responsive sites.
Just in case, in your HTML head, something like this:
HTML:
CSS:
Current solution would be to use viewport height (vh) to indicate the desired height. 100% did not work for Mobile Chrome. CSS:
After hours of trying different things, adding
min-height: 100%;
to the bottom ofhtml
under the{ background:... }
worked for me.Galaxy S3 havs a width of greater than 480px in either portrait or landscape view so I don't think those CSS rules will apply. You will need to use 720px.
Try add:
right at the end & move your
html { background:... }
CSS after that.This way you can see if there is a mobile footer div or any other element you created that is getting in the way, blocking the view.
Also I would try applying the background CSS to body rather than HTML. Hope you get closer to the answer.