Blank space in portrait mode on mobile

HTML & CSS
3

Hi,

Mobile devices don’t like background attachment fixed combined with background-size:cover and they don’t work properly when used together.

You should place the body image on a pseudo element and then position:fix that element which means the background doesn’t need to be attachment-fixed and allows you to use cover.

e.g.


Change your body rules to this:

body {
	background:#fff;
}
body:after {
	content:"";
	position:fixed;
	z-index:-1;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:url(images/rocks.png) no-repeat;
	background-size: cover;
}

Also your use of relative positioning on your inline styles should never be used in that way as relative positioning does not moves things physically. It moves items visually but they always occupy the same space in the flow that they always did. Instead use margins or some other positioning scheme to position your text.

Also top:490px is a magic number and won’t work for most people and be miles away on small devices.

i.e… this code is not manageable:

<div >
  <p  style="color:white; font-size:19px; text-align:center;position:relative; top:390px;"">Edit and share your home made videos on smart phones.</p>
</div>
<!-- BUTTON-->
<div style=" text-align:center; position:relative; top:400px;" >
  <button type="button" class="btn btn-danger  " style="border-radius:20px;"><i class="fa fa-apple" aria-hidden="true">&nbsp;Download here</i> </button>
</div>

If you were looking for text centred in the viewport then there are better ways to do this that are automatic (e.g. display:table/table-cell or flexbox).

3 Likes