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 class="header">
<div class="container">
<img class="logo" src="https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/logo.png" alt="logo image" >
<div class="links">
<span class="icon">
<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 class="landing">
<div class="intro-text">
<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
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.