Question posted in 
When I made a website design using HTML and CSS it was working for large screens but when it comes to media query to make it responsive for small screens and medium it showed a lot of white space and it’s scrolling horizontally until no content still there.
I tried to recoding it again and instead of writing a width of parent div in pixels I write it in percentage. It’s better then pixels but it’s still scrolling out of content and showed white space. I just need to know what I am doing wrong in code that keep the white space with smaller screens and how could solve the horizontally scrolling
body {
margin: 0;
padding: 0;
}
.page {
display: flex;
align-content: center;
flex-direction: column;
position: relative;
width: 100%;
font-family: "Poppins", sans-serif;
}
.head {
position: relative;
display: inline-flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%);
}
.head img {
width: 200px;
}
.head::before {
display: inline-flex;
content: "";
position: absolute;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, #D9D9D9 35%, #D9D9D9 65%, rgba(217, 217, 217, 0) 100%);
top: 100%;
z-index: 1;
}
.head ul {
position: relative;
display: inline-flex;
list-style: none;
width: 30%;
justify-content: space-between;
color: white;
font-size: 16px;
align-items: center;
}
.con {
position: relative;
display: inline-flex;
width: 20%;
justify-content: space-between;
align-items: center;
}
.con button {
border: none;
background-color: #58B3C8;
font-size: 16px;
color: white;
width: 135px;
height: 36px;
border-radius: 2px;
}
.con i {
display: inline-flex;
align-self: center;
justify-content: flex-start;
color: white;
margin-left: 20px;
}
.con p {
color: white;
margin-right: 40px;
}
.intro {
position: relative;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
height: 525px;
background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%);
}
.intro::before {
display: flex;
content: "";
position: absolute;
background-image: url(../images/Asset.png);
background-position: center;
background-size: cover;
background-blend-mode: darken;
width: 100%;
height: 525px;
opacity: 0.3;
}
.intro h2 {
position: absolute;
color: white;
font-size: 40px;
width: 757px;
text-align: center;
}
.intro p {
display: flex;
position: absolute;
color: white;
top: 310px;
font-size: 18px;
}
.niche {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #FFF;
height: 255px;
}
.niche h3 {
font-size: 40px;
}
.niche p {
font-size: 14px;
width: 796px;
}
@media (min-width: 380px) {
.page {
display: flex;
align-content: center;
flex-direction: column;
position: relative;
width: 100%;
font-family: "Poppins", sans-serif;
}
.head {
position: relative;
display: inline-flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
background: linear-gradient(90deg, rgba(15, 34, 60) 0%, rgba(16, 25, 37) 100%);
}
}<div class="page">
<!-- Header side -->
<div class="head">
<img src="Logo.png" alt="">
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About Us</li>
</ul>
<div class="con">
<button>Contact Us</button>
<i class="fa-solid fa-globe"></i>
<p>English</p>
</div>
</div>
<div class="intro">
<h2>A different approach in the field of technology</h2>
<p>We proudly provide you with a fast & distinguished service.</p>
</div>
<div class="niche">
<h3>Who we are?</h3>
<p><strong>Cloud tech</strong> is a leading company in the field of technology and IT solutions,
we have provided a remarkable service for a big slide of the companies, agencies, banks,
trademarks, global plus local organizations and VIP customers successfully since the company launch till now</p>
</div>
</div>
2
Answers
You have set the width of intro heading text which is 757px when your screen size is less than the width there will be white space to contain 757px width just remove the width. And one more issue is when your screen size is small responsive view you need to bring all your menu under a button like a dropdown which is much easy by using Bootstrap.
In the horizontal direction, the white space is related to the scrollbar.
The seemingly white space is actually due to some elements being too wide, larger than the screen, resulting in scrollbars.
You can use F12 or other methods to open devtools for debugging and observation.
Changing the
pxof thewidthattribute, and perhaps other attributes, will solve the problem.