Page landscape mode does not fit

Navigation
0

I put a photo of the background, having 100% height.

When I open the site via mobile (or Chrome / Firefox console) in landscape mode, the background of the image does not occupy all the space.

In desktop mode and mobile mode in portrait position they are ok. Just LANDSCAPE so that's a problem.

I want in landscape mode, the content is to set the viewport. How to do this?

MOBILE:PORTRAITMODE,OK.

MOBILE:MODELANDSCAPE,thedivdoesnotfitaccordingtocontent.

  

OBS1:RuntheSnippetinthebrowserconsole.InthemobilesimulatorforyoutounderstandwhatImean-do.

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 tried to remove the .block: before e: 

@media(orientation: landscape){
  .background-image {
    min-height: 200%;
  }
}

But, this effect does not work only in MOBILE mode. It works on both MOBILE and DESKTOP. I want it to work only on MOBILE.

    
asked by anonymous 08.01.2016 / 18:09

2 answers

3

See if that's what you wanted:

What I did was remove .block:before , as you said, and added .img-responsive a margin: auto to center.

As for div.block and body instead of height: 100% I applied height: auto and min-height: 100% . A simple% w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w w wur. This setting is important if you want to add new elements to your page, so they did not have the same problem as before. With height: 100% body will adjust to the size of your content, but with .block , it will not be reduced to a size smaller than the viewport.

Finally, I recommend that you remove height: auto from div.block , this top in percentage can result in some unpleasant situations, the best would be a fixed value, such as min-height: 100% . But that's up to you. And if you want a distance from the content at the bottom, just add margin-top: 10% .

These reformulations will collaborate on a code that is more functional and better adaptable to new elements. 

body, html {
  height:100%;
  padding:0;
  margin:0;
}
.block {
  height: auto;
  min-height: 100%;
  width: 100%;
  text-align: center;
  background: black;
}
.centered {
  margin-top: 50px;
  display: inline-block;
  vertical-align: middle;
  max-width: 500px; 
  background: white;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 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>

Example - JsFiddle

    
09.01.2016 / 02:39
3
So as I said the problem occurs on Desktop too, this is due to height: 100% , because it does not work with the maximum height of the page but instead of view-port , a simple way to solve would be to use display: table in .block , see an example: 

body, html {
  height:100%;
  padding:0;
  margin:0;

}
.block {
  height: 100%;
  width: 100%;
  text-align: center;
  background: black;
  display: table;

}

.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>

See the result in the image:

    
09.01.2016 / 02:50
Mysql Update of empty columns only [closed] Multiple conditions in an if