Issue
I'm playing around with a site for a friend, and I'm having issues making things fit when resizing the window.
Normal: Looks as it should Smaller window: Gap under image
A gap appears under the image - ideally I want the image to resize when the window does.
Here's the HTML and CSS
<section id="home-info" class="bg-light">
<div class="info-img"></div>
<div class="info-content">
<h2>About <span class="text-primary">133</span> Grand Rue</h2>
<p>
TEXT
</p>
<a href="about.html" class="btn">Read More</a>
</div>
</section>
<section id="features">
<div class="box bg-light">
<i class="fas fa-mountain-sun fa-3x"></i>
<h3>Great Location</h3>
<p>Sitting in the centre of St Jean du Gard, with access to the town centre.....</p>
</div>
<div class="box bg-primary">
<i class="fas fa-person-swimming fa-3x"></i>
<h3>Pool</h3>
<p>Access to the garden and pool for the downstairs apartment.</p>
</div>
<div class="box bg-light">
<i class="fas fa-question fa-3x"></i>
<h3>?</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, officiis.</p>
</div>
</section>
CSS:
#home-info {
height: 400px;
}
#home-info .info-img {
float: left;
width: 50%;
background: url('../img/archway.jpg') no-repeat;
min-height: 100%;
background-size: 100%;
text-align: center;
}
#home-info .info-content {
float: right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
overflow: hidden;
}
#home-info .info-content p {
padding-bottom: 30px;
}
/* Features */
.box{
float:left;
width: 33.333%;
padding:60px;
text-align:center;
}
.box i{
margin-bottom:10px;
}
tried to play around with widths and heights etc.
Solution
The space is happening because the image is not filling its container fully when the screen resizes. When you use the float
property, it takes the element out of the normal flow of the document. I would use flex for this section.
Setting the flexbox children to flex: 1
, you ensure the image grows and shrinks properly with the container. This is a shorthand property in flexbox that sets flex-grow
, flex-shrink
, and flex-basis
. See the complete guide to flexbox here.
See below:
#home-info {
display: flex;
height: 400px;
}
#home-info .info-img {
flex: 1;
background: url('../img/archway.jpg') no-repeat;
min-height: 100%;
background-size: cover;
text-align: center;
}
#home-info .info-content {
flex: 1;
text-align: center;
padding: 50px 30px;
overflow: hidden;
}
#home-info .info-content p {
padding-bottom: 30px;
}
/* Features */
.box {
flex: 1;
padding: 60px;
text-align: center;
}
.box i {
margin-bottom: 10px;
}
.section {
display: flex;
}
.bg-light {
background-color: #f9f9f9;
}
.bg-primary {
background-color: #007bff;
color: #fff;
}
/* Media Query for mobile */
@media screen and (max-width: 768px) {
#home-info {
flex-direction: column;
height: auto;
}
#home-info .info-img,
#home-info .info-content,
.box {
width: 100%;
}
}
<section id="home-info" class="bg-light">
<div class="info-img"></div>
<div class="info-content">
<h2>About <span class="text-primary">133</span> Grand Rue</h2>
<p>
TEXT
</p>
<a href="about.html" class="btn">Read More</a>
</div>
</section>
<section id="features">
<div class="box bg-light">
<i class="fas fa-mountain-sun fa-3x"></i>
<h3>Great Location</h3>
<p>Sitting in the centre of St Jean du Gard, with access to the town centre.....</p>
</div>
<div class="box bg-primary">
<i class="fas fa-person-swimming fa-3x"></i>
<h3>Pool</h3>
<p>Access to the garden and pool for the downstairs apartment.</p>
</div>
<div class="box bg-light">
<i class="fas fa-question fa-3x"></i>
<h3>?</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet, officiis.</p>
</div>
</section>
Answered By - JayDev95
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.