html – Images and text are clipping through border


Text, Images Resize Error

I created a section with images and text 50% each but after specific viewport both image and text clips through the borders. For reference check the picture above. I’m using flex box for this but couldn’t figure out how to make text and images stay in border.

    <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="./images/illustration-grow-together.svg" alt="illustration-grow-together">
      </div>
      <div class="feature">
        <img class="flex-right" src="./images/illustration-flowing-conversation.svg" 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="./images/illustration-your-users.svg" alt="illustration-grow-together">
      </div>
    </div>
  </section>
.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;
}



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here