I have an empty space that keeps growing in size and I have no idea why
P粉729518806
2023-08-14 19:03:11
<p>Picture of question:
Picture of the question</p>
<p>If you look at the previous image, you'll see that I have a huge empty space there. When I have my normal display (around 1200 pixels) everything is fine. However, when the width is reduced, that empty space always increases and I don't know why this is happening. </p>
<p> Pictures displayed normally on the screen:
Normally displayed pictures</p>
<p>I will upload a portion of the HTML and CSS code so that the code can be written clearly. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.about-me{
margin-top: 10px;
max-width: 100%;
max-height: 100%;
height: 100vh;
}
.about-me h1{
color: goldenrod;
text-align: center;
font-size: 52px;
}
.about-me .about{
display: flex;
justify-content: center;
align-items: center;
}
.about-me .about .text-container{
max-width: 70%;
}
.about-me .about .text-container p{
font-size: 24px;
text-align: center;
margin: 50px;
}
.about-me .about .text-container span{
color: goldenrod;
font-weight: 900;
}
.border{
display: flex;
justify-content: center;
align-items: center;
border: 1px solid goldenrod;
background-color: goldenrod;
border-radius: 50%;
margin: 0 50px;
max-width: 100%;
}
.about-me .border img{
max-width: 100%;
max-height: 100%;
border-radius: 50%;
scale: 95%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}</pre>
<pre class="brush:html;toolbar:false;"><div class="about-me" id="about-me">
<h1>What are we? </h1>
<div class="about">
<div class="text-container">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="border">
<img src="img/arcos.jpg" alt="">
</div>
</div>
</div></pre>
<p><br /></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I see the problem. The huge empty space is caused by the
max-width: 100%;attribute on the.about-me div. This attribute tells the browser to set thediv's width to100%of its container. However, when the width of the container is reduced, thedivwill still try to maintain the100%width, which will create an empty space.To fix this problem, you can remove the
max-width: 100%;attribute from the.about-me div. This will allow thedivto shrink based on the width of its content, thus eliminating empty space.