Blank space in portrait mode on mobile

Hi, I have troubes with responsive design in Bootstrap in portrait mode. There stays white blank space down there under background-image. I enclose code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Test template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
	
	<!-- Custom Css style-->
	<link href="css/global.css" rel="stylesheet" type="text/css"  >
	
	<!-- Icons-->
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	 
	  <style>

@font-face {
    font-family: Coffee; /* deklarace fontu */
    src: url("../font/coffee.ttf");  /* propojení na umístění souboru */
}

ul  {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
   
}

li a {text-decoration:none;
    color: white;
	 font-family: Coffee;
      font-size:20px;}

li  a:hover { background-color:black; 
                }
				
.navbar-toggle{background-color:black;} /* responsive menu background color*/

.icon-bar{ color:black;}     /*not working menu icon after resizing, cannot set color of that menu 3 lines icon*/


div.eq{visibility:hidden;}	/*citat endora pryc */    

		  
body{ background-image: url(images/rocks.png);    /* on mobile display in portrait mode there stays blank space under backgr-img   */
      background-size: cover;
	  background-repeat:no-repeat;
      background-attachment: fixed;
	  }
		  



	  
	  
	  
	  
	  </style>
  </head>
  <body >
  <div class="container-fluid">
		
				<!-- NAV-->
	<nav class="navbar ">
  <div class="container-fluid " >
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar" "></span><!-- HOW TO SET DIFFERENT COLOR OF THis ICON-->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"> <img src="images/vimeo2.png" alt="vimeo" style="margin-top:-10px;"></a>   <!-- BRAND-->
    </div>

    <!-- Collect the nav links, forms, and other content for toggling --><!-- LEFT MENU-->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active" style="background-color:green; border-radius:10px;"><a href="#">Join<span class="sr-only">(current)</span></a></li>
        <li><a href="#">On Demand</a></li>
		 <li><a href="#">Create</a></li>
		  <li><a href="#">Watch</a></li>
       </ul>
    
      <ul class="nav navbar-nav navbar-right"><!-- RIGHT MENU-->
        <li  style="background-color:black; border-radius:0px;"><a  style="color:white;"href="#">Login</a></li>
       
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


			
						
				<!-- TEXT -->
				   <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>
               
 
    

   
	    
	</div>
	 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

michelin333,

Can you post a link to your test site? We cannot possibly troubleshoot a bootstrap in portrait mode problem without knowing the device/s tested and seeing the rest of the code and images that are being affected.

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

test site: http://testuj.8u.cz/

the blank space under background image.
I want it to automacly change size of background-image according to screen size. Thanks for help

Have you read @PaulOB’s recommendation?
Do you understand it?
Do you know how to implement it?

I cannot run your test page very effectively. The background image is more than 6 megabytes (6,410,438 bytes) and takes over 10 seconds to load over a cable connection. The page itself chokes while it is loading and sometimes never finishes loading. The “weight” of the image should be optimized to under 200K for web use.

The same background-image plus a background-color in .jumbotron is blocking the background-image in Paul’s code.

If the code in your sample is anything like your working page, then the validator shows several significant errors that should be corrected.

https://validator.w3.org/nu/?doc=http%3A%2F%2Ftestuj.8u.cz%2F

2 Likes

You have different code in that site to the css you posted as your rocks image is on the html element now.

You would need to change the code to this:

html,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 50% 50%;
	background-size: cover;
}

I don’t see that you made any attempt to implement it though?

100% agree with @ronpat about optimizing your images, GT Metrix is an excellent tool for this type of thing and allows you to download optimized versions of the image, Google Page Speed Insights does also, as a website provider we have an obligation to try and provide the best user experience possible, a 6 MB image is not suitable for most devices / connections… The solution offered by @PaulOB looks good also and using a website validator as @ronpat also suggests should be a priority, those 5 errors are not hard to fix and your site will work much better as a result… Best of luck…

Thank a lot guys for your amazing knowledges and help.

And second and last question how to manage

“p” element to be 300px from top in screen size under 760px? www.testuj.8u.cz

I tried this:…code… without effect

code:
@media screen and (min-width: 760px) {
p.text {
margin-top: 300px;
}
p.buttton {
margin-top: 20px;
}
}

Hi,

You are making 3 errors there :slight_smile:

  1. You want to use max-width to effect changes to widths less than the specified dimension.
    e.g.

@media screen and (max-width:760px){
 /* rules for screens smaller than 760px go here */
}
  1. You have set the margin for that element in an inline style attribute and when css is written like that the only way you can over-ride it with normal css is to use !important.
@media screen and (max-width:760px){
p.text{margin-top:300px!important;}
}

Generally it is considered very bad to use inline styles because it makes it hard to elicit changes from the stylesheet and you end up using important everywhere which is also another property value that should be used very sparingly indeed.

  1. The third mistake is as I pointed out before and the margin-top:300px smells of magic numbers and is best avoided if you can. You may be able to get away with it in small doses but generally you would want to use a positioning method that gives you the alignment you want automatically without relying on large numbers like that. I’m sure margin-top:300px will put that text below the fold on most mobiles.

Although it takes more effort I would have coded that text in such a way that it was centred vertically as well as horizontally automatically and in that way the screen could go up and down in size and the element could likely remain centred without resorting to multiple media queries.

3 Likes

Thanks a lot for your help, without you would be helpless. Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.