the content of my site was hidden and scroll bar ends with up to the height of the mobile screen and this only happens to only specific mobile layout and other mobile layout works fine
i was practicing for the responsive layout while i had strange issue show in the above image the content was hidden in specific mobile layout and i need the scroll bar to work
*{
box-sizing: border-box;
margin:0;
padding: 0;
}
html{
font-size:10px;
scroll-behavior: smooth;
}
body{
margin:0;
padding: 0;
font-family: "Roboto", sans-serif;
}
.header{
/* padding:14.6rem 4.5rem; */
height:100vh;
/* padding:12rem 0; */
/* min-width:100%; */
background-color: #23424A;
color: white;
/* padding-top: 150px; */
display: flex;
flex-direction: column;
justify-content: center;
}
header>section{
max-width:min(65%,100%);
margin:0 7rem;
}
header>section>h1{
font-family: "Roboto", sans-serif;
font-weight: 900;
font-style: normal;
font-size:clamp(2.5em,3.8vw,12.5em);
/* font-size:8vmin; */
margin-top:14px;
padding:1rem 0 0 0;
}
header>section >p{
font-family: "Roboto", sans-serif;
font-weight:380;
font-style: normal;
max-width:90%;
font-size:clamp(1.2em,2vw,10em);
margin:14px 0 14px 0;
padding:1rem 0 1rem 0;
}
button{
padding:1em 3.7em;
border-radius: 50px;
border: none;
background-color: #38CFD9;
font-family: "Roboto", sans-serif;
font-weight:700;
font-size:clamp(.5em,1vw,3.5em);
color:#132327;
}
main{
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}
main > section{
padding:2rem 0;
width:80%;
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:2rem;
}
main > section > div{
background:#578a9621;
color:#23424A;
/* max-width: ; */
padding:1rem;
margin:1rem;
border-radius: 1em;
}
main > section > div > h3{
font-size:clamp(2em,2vw,5em);
padding: .2em;
}
main > section > div > p{
font-size:clamp(.5em,1.3vw,5em);
padding: .2em;
}
@media(max-width:800px){
.header, main{
padding:2.5rem 0;
height:auto;
}
main > section{
display: block;
}
}
footer{
max-width:100%;
background-color: #325d67d8;
min-height:10em;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
footer p{
font-size:clamp(.8em,1.5vw,3.5em);
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="figma-css.css">
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<section>
<h1>Responsive layouts don’t have to be a struggle</h1>
<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
<button>I WANT TO LEARN</button>
</section>
</header>
<main>
<section>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
<div>
<h3>heading</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis dolore repellendus distinctio minus. Dolore ut, provident asperiores doloremque esse aspernatur est eius exercitationem velit non soluta deleniti fuga dolor pariatur.</p>
</div>
</section>
</main>
<footer>
<section>
<p>@inc 2012 created by ambrish</p>
</section>
</footer>
</body>
</html>
