Why is the vh unit not performing as expected on cell phones windows?-CodePudding

The aim of the code is that the background of the inner text div is of full height of the available body height (Without the need to scroll down) . The code works for laptop screen and for ipad dimensions (In chrome developer tools) .

The problem is with cellphones . The background height doesn't reach to the bottom of the page and just instead the default height of the image . The used 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.0">
    
   <style> 

/*  Beginning of global variables*/
:root {
    --main-color: #11cab7;
}
/* End of global variables */
/* Beginning of Global rules */
* {
    box-sizing: border-box;
}
body {
    font-family: 'Work Sans', sans-serif;
}
.container {
    width: 600px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/*.Small.*/

@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium.*/
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* End of global rules */

/* Begin of header styling */
.header {
    padding: 20px;
}
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    width: 100px;
    height: 40px;
}
.links {
    position: relative;
}
.header .links .icon {
    width: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor: pointer;
}
.header .links .icon span {
    background-color: #333;
    height: 2px;
    margin-bottom: 5px;
}
.header .links .icon span:first-child {
    width: 100%;
}
.header .links .icon span:nth-child(2) {
    width: 60%;
    transition: .3s linear;
}
.header .links .icon span:last-child {
    width: 100%;
}
.header .links .icon:hover span:nth-child(2){
    width: 100%;
}


.header .container ul {
    list-style-type: none;
    display: block;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 200px;
    padding: 0;
    right: 0;
    display: none;
}
.header .container ul::before {
    content: "";
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #f6f6f6 transparent;
    position: absolute;
    right: 5px;
    top: -20px;
}
.header .container ul li {
    display: block;
    padding: 15px;
    transition: .2s;
   
}
.header .container ul li:hover {
    padding-left: 25px;
}
.header .container ul li a {
    text-decoration: none;
    color: #333;
}
.header .container ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.header .container .links:hover ul {
    display: block;
    transition: 0.1s;
    z-index: 1;
}
/* End of header styling */
/* Beginning of landing section */

.landing {
    background-image: url(https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/landing.jpg);
    background-size: cover;
    min-width: 620px;
    height: calc(100vh - 80px);
    position: relative;
}
.landing .intro-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 320px;
    max-width: 100%;
}
.landing .intro-text h1 {
    margin: 0;
    font-size: 50px;
    color: var(--main-color);
}
.landing .intro-text p {
    font-size: 19px;
    line-height: 1.8;
}





/* End of landing section */



</style>
    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work Sans:wght@200;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
   
        <!-- The use of the container is that our text not start from
        the beginning of the webpage as it is visually not good -->
        <!-- Beginning of header -->
        <div >
            <div >
                <img  src="https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/logo.png" alt="logo image" >
                <div >
                    <span >
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <ul>
                        <li>
                            <a href="#services">Services</a>
                        </li>
                        
                        <li>
                            <a href="#portfolio">Portfolio</a>
                        </li>

                        <li>
                            <a href="#about">About</a>
                        </li>

                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- End of header -->
        <!-- Beginning of sections -->
        <div >
            <div >
                <h1>Hello there</h1>
                <p>We are Leon - Super creative and minimal agency
                    Web Template
                </p>
            </div>
        </div>

        <!-- End of sections -->
</body>
</html>

I would be thankful for the solution that uses pure CSS

CodePudding user response：

I think this happens because of overflowing

you need to set overflow-x on html and body hidden like:

body, html{
  overflow-x: hidden;
}

this will break your navbar, but you can add this to fix it:

.header .container{
  width:100%;
}

and finally, for the text remove the max-with:620px to make it more responsive.

Hope it will help you.