Unable to scroll the webpage

#1

Screenshot 2023-01-20 at 11.45.33 AM
Screenshot 2023-01-20 at 11.45.33 AM1920×1065 214 KB

I’m unable to scroll down the webpage to see the contents. I can zoom out the page and see but there is no scroll option. There is no problem with my browser or system. Scrolling is working in other websites except this one. My HTML and CSS are the exact same as the ones written in the video lectures. Any solutions please?

#2

Can you share your code so we can assist you…?

#3
Learning html 
<body>

	<div class="container">

		<header class="coffee-header">
			<div class="div-logo">
				<img src="coffee.png">
				<span class="logo-text"> Coffee Shop </span>
			</div>
			<nav class="coffee-nav">
				<a href="#"> Home</a>
				<a href="#"> Product</a>
				<a href="#"> Price</a>
				<a href="#"> About</a>
			</nav>

			<div class="site-content">
				<div class="image-content">
					<h1 class="quote"> Coffee is the best thing to douse the sunrise with. </h1>
				</div>
				<div class="card-list">
					<h1 id="product"> Product </h1>
					<div class="card">
						<img src="mocha-image.png">
						<div>
							<h2> Mocha </h2>
							<h3> &#8377; 250 </h3>
						</div>	
					</div>
					<div class="card">
						<img src="cappuccino-image.png">
						<div>
							<h2> Mocha </h2>
							<h3> &#8377; 250 </h3>
						</div>	
					</div>
					<div class="card">
						<img src="americano-image.png">
						<div>
							<h2> Mocha </h2>
							<h3> &#8377; 250 </h3>
						</div>	
					</div>
					<div class="card">
						<img src="latte-image.png">
						<div>
							<h2> Mocha </h2>
							<h3> &#8377; 250 </h3>
						</div>	
					</div>
				</div>
			</div>
		</header>
	</div>
</body>
#4

body{
margin: 0px;
}

.coffee-header{
position: fixed;
left: 0px;
right: 0px;
height: 100px;
width: 100%;
background-color: #0a2d42;
}

.div-logo{
height: 100%;
margin: 10px;
text-align: center;
float: left;
}

.logo-text{
display: block;
color: whitesmoke;
font-family: “Helvetica Neue”;
font-weight: bold;
}

.coffee-nav{
float: right;
height: 100%;
}

.coffee-nav a{
color: white;
font-size: 15px;
font-weight: 700;
font-family: “Helvetica Neue”;
padding-right: 20px;
padding-top: 14%;
display: inline-block;
}

.site-content{
position: absolute;
top: 78px;
width: 100%;
text-align: center;
}

.image-content{
background-image: url(“csimg.jpeg”);
height: 700px;
width: 100%;
}

.quote{
color: white;
font-family: “Helvetica Neue”;
position: relative;
top: 10%;
}

.card-list{
width: 100%;
}

#product{
text-align: center;
}

.card{
width: 22%;
padding: 1.5%;
height: 300px;
float: left;
text-align: center;
}

.card img{
width: 100%;
}

#5

Hi , close the header after nav tag and run the code

1 Like
#6

Got it. Thank you for the help.

#7

I hope your query has been resolved?

1 Like
#8

yes. I found the mistake. I resolved it