Issue
I am new to programming, learning HTML CSS. I have a flowing img out of my div which is the .team-main. It affects the width of the other sections. How can I stop this? so my sections do not cover the page horizontally because of this. Can somebody help me fix this please?
this is the ss of the background color: Not fitting background color
#team {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #f8f9fa;
margin-top: 5rem;
}
.team-main {
width: 100vw;
height: 800px;
align-items: center;
text-align: center;
}
.team-title h1 {
margin-bottom: 1rem;
font-size: 40px;
}
.team-title p {
color: #6c757d;
font-style: italic;
font-size: larger;
text-align: center;
}
.team-member p {
color: #6c757d;
font-size: large;
font-weight: 100;
margin: 0.4rem 0 1rem;
}
.team-members {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 3rem 5rem 5rem;
}
.team-members-middle {
text-align: center;
width: 50%;
margin: auto;
color: #6c757d;
}
.team-member {
width: 100%;
}
.team-member img {
height: 220px;
width: 220px;
margin: 1rem 7rem;
border-radius: 50%;
border: 8px solid #d4d5d7;
}
.team-member .member {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #111212;
}
.team-member .member i {
font-size: 16px;
color: white;
}
<section id="team">
<div class="team-main">
<div class="team-title">
<h1 id="team">OUR AMAZING TEAM</h1>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div class="team-members">
<div class="team-member">
<img src="https://startbootstrap.github.io/startbootstrap-agency/assets/img/team/1.jpg" alt="" />
<h2>Parveen Anand</h2>
<p>Lead Designer</p>
<div class="member"><a href=""><i class="fa-brands fa-twitter"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-facebook-f"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-linkedin-in"></i></a> </div>
</div>
<div class="team-member">
<img src="https://startbootstrap.github.io/startbootstrap-agency/assets/img/team/2.jpg" alt="" />
<h2>Diana Petersen</h2>
<p>Lead Marketer</p>
<div class="member"><a href=""><i class="fa-brands fa-twitter"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-facebook-f"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-linkedin-in"></i></a> </div>
</div>
<div class="team-member">
<img src="https://startbootstrap.github.io/startbootstrap-agency/assets/img/team/3.jpg" alt="" />
<h2>Larry Parker</h2>
<p>Lead Developer</p>
<div class="member"><a href=""><i class="fa-brands fa-twitter"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-facebook-f"></i></a></div>
<div class="member"><a href=""><i class="fa-brands fa-linkedin-in"></i></a> </div>
</div>
</div>
<p class="team-members-middle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque,
laboriosam veritatis, quos non quis ad perspiciatis, totam corporis
ea, alias ut unde.
</p>
</div>
https://codepen.io/mizginyildirak/pen/ZERzOVx
Solution
I will keep it simple, whenever you decide to use flex
attribute on a row avoid using width
attribute on that element, especially the 100%
value. Because flex items by default are set to flex-shrink: 1
, which means they are permitted to shrink in order to fit inside the container. Therefore by specifying the width: 100%;
attribute for the container, you will break this rule.
So removing width: 100%;
from team-members
class will fix the problem.
...
.team-members {
width: 100%; /* remove this line */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 3rem 5rem 5rem;
}
...
Update
First off, you also need to remove width: 100%;
from the #team
element too, then instead of giving each image within the flex container the margin (margin: 1rem 7rem
), give its parent the gap
property. Keep in mind the margins will make the container box larger therefore the contents will overflow from the main targeting theme.
Change your CSS code like this and you will fix the issue.
...
.team-members {
display: flex;
justify-content: center;
align-items: center;
gap: 7rem;
text-align: center;
margin: 3rem 5rem 5rem;
}
...
.team-member img {
height: 220px;
width: 220px;
margin: 1rem 0;
border-radius: 50%;
border: 8px solid #d4d5d7;
}
...
CodePen: https://codepen.io/smalikss/pen/wvXwzjy
Answered By - SMAKSS
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.