Error in Resizing Text and Images
My layout consists of sections with text and images distributed equally, but when the viewport size changes, both the text and images extend beyond the borders. I have utilized flexbox for this design but haven't been able to find a solution to keep the text and images within the border constraints. Please refer to the image above for clarification.
.features {
display: flex;
justify-content: center;
margin: 200px 0;
margin-bottom: 280px;
}
.feature {
display: flex;
align-items: center;
justify-content: center;
border: 0px solid gray;
border-radius: 20px;
box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.15);
margin: 40px 30px;
}
.flex-left {
flex: 1;
padding: 60px;
max-width: 680px;
}
.flex-left h2 {
font-size: 2.2rem;
margin-bottom: 20px;
}
.flex-left p {
font-size: 1.125rem;
color: var(--gblue);
}
.flex-right{
flex: 1;
max-width: 620px;
width: 100%;
height: auto;
padding: 50px;
} <section class="features">
<div class="container">
<div class="feature">
<div class="flex-left">
<h2 class="f-h2">Grow Together</h2>
<p class="f-p">
Generate meaningful discussions with your audience and build a strong, loyal community. Think of the insightful conversations you miss out on with a feedback form.
</p>
</div>
<img class="flex-right" src="https://www.w3schools.com/html/workplace.jpg" alt="illustration-grow-together">
</div>
<div class="feature">
<img class="flex-right" src="https://www.w3schools.com/html/workplace.jpg" alt="illustration-grow-together">
<div class="flex-left">
<h2 class="f-h2">Flowing Conversations</h2>
<p class="f-p">
You wouldn't paginate a conversation in real life, so why do it online? Our threads have just-in-time loading for a more natural flow.
</p>
</div>
</div>
<div class="feature">
<div class="flex-left">
<h2 class="f-h2">Your Users</h2>
<p class="f-p">
It takes no time at all to integrate Huddle with your app's authentication solution. This means, once signed in to your app, your users can start chatting immediately.
</p>
</div>
<img class="flex-right" src="https://www.w3schools.com/html/workplace.jpg" alt="illustration-grow-together">
</div>
</div>
</section>