Padding to contain text in a wrapper

Question

I want the text to have a padding of 30px around the card-content container, however, currently the subtitle text overflows.

.card {
  background-color: transparent;
  margin: 0;
  border: 1px solid rgb(180, 191, 200);
  border-top: none;
}

.card-img-left {
  height: 40%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('./../img/card-left.png');
}

.card-content {
  height: 60%;
  width: 100%;
}

.card-text {
  height: calc(100% / 3 * 2);
  width: 100%;
  padding: 1.5rem 2.5rem 2.5rem;
  text-align: left;
}

.card-title {
  font-size: 2rem;
  color: rgb(3, 16, 34);
  font-family: nbold;
}

.card-subtitle {
  margin-top: 1em;
  font-size: 15px;
  color: rgb(59, 66, 77);
}

.card-btn {
  height: calc(100% / 3);
  width: 100%;
}

<div class="card">
  <div class="card-img-left"></div>
  <div class="card-content">
    <div class="card-text">
      <div class="card-title">Free valuation</div>
      <div class="card-subtitle">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, labore voluptas. Ipsa nulla laboriosam labore! Aspernatur numquam in impedit quod ea obcaecati dolorum incidunt! Facere optio officia veniam, quas voluptatum aperiam eligendi aut maiores
        ipsa explicabo. Repellat, praesentium! Quia sint reprehenderit quibusdam alias temporibus nihil ipsum beatae deleniti facilis harum.</div>
    </div>
    <div class="card-btn"></div>
  </div>
</div>

It looks like this:

[![Screenshot][1]][1]

How do I fix this? [1]: https://i.stack.imgur.com/R440Y.png

score 1 · Accepted Answer · answered Jul 18 '20 at 19:12

Add box-sizing: border-box; to your .card-text styles.

.card {
  background-color: transparent;
  margin: 0;
  border: 1px solid rgb(180, 191, 200);
  border-top: none;
}

.card-img-left {
  height: 40%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('./../img/card-left.png');
}

.card-content {
  height: 60%;
  width: 100%;
}

.card-text {
  height: calc(100% / 3 * 2);
  width: 100%;
  padding: 1.5rem 2.5rem 2.5rem;
  text-align: left;
  box-sizing: border-box;
}

.card-title {
  font-size: 2rem;
  color: rgb(3, 16, 34);
  font-family: nbold;
}

.card-subtitle {
  margin-top: 1em;
  font-size: 15px;
  color: rgb(59, 66, 77);
}

.card-btn {
  height: calc(100% / 3);
  width: 100%;
}

<div class="card">
  <div class="card-img-left"></div>
  <div class="card-content">
    <div class="card-text">
      <div class="card-title">Free valuation</div>
      <div class="card-subtitle">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, labore voluptas. Ipsa nulla laboriosam labore! Aspernatur numquam in impedit quod ea obcaecati dolorum incidunt! Facere optio officia veniam, quas voluptatum aperiam eligendi aut maiores
        ipsa explicabo. Repellat, praesentium! Quia sint reprehenderit quibusdam alias temporibus nihil ipsum beatae deleniti facilis harum.</div>
    </div>
    <div class="card-btn"></div>
  </div>
</div>

score 0 · Answer 2 · answered Jul 18 '20 at 19:10

0

Try using this CSS on a text container:

word-wrap: break-word;

answered Jul 18 '20 at 19:10

user13949633

56
5

score 0 · Answer 3 · answered Jul 18 '20 at 19:15

You just need a width on the subtitle:

.card {
  background-color: transparent;
  margin: 0;
  border: 1px solid rgb(180, 191, 200);
  border-top: none;
}

.card-img-left {
  height: 40%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('./../img/card-left.png');
}

.card-content {
  height: 60%;
  width: 100%;
}

.card-text {
  height: calc(100% / 3 * 2);
  width: 100%;
  padding: 1.5rem 2.5rem 2.5rem;
  text-align: left;
}

.card-title {
  font-size: 2rem;
  color: rgb(3, 16, 34);
  font-family: nbold;
}

.card-subtitle {
  margin-top: 1em;
  font-size: 15px;
  color: rgb(59, 66, 77);
  width: calc(100% - 5rem);
}

.card-btn {
  height: calc(100% / 3);
  width: 100%;
}

<div class="card">
  <div class="card-img-left"></div>
  <div class="card-content">
    <div class="card-text">
      <div class="card-title">Free valuation</div>
      <div class="card-subtitle">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, labore voluptas. Ipsa nulla laboriosam labore! Aspernatur numquam in impedit quod ea obcaecati dolorum incidunt! Facere optio officia veniam, quas voluptatum aperiam eligendi aut maiores
        ipsa explicabo. Repellat, praesentium! Quia sint reprehenderit quibusdam alias temporibus nihil ipsum beatae deleniti facilis harum.</div>
    </div>
    <div class="card-btn"></div>
  </div>
</div>

score 0 · Answer 4 · answered Jul 18 '20 at 19:19

the problem you have is causing by the box-sizing

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

What you can do is put in your main style file

* {
box-sizing: border-box;
}

by default, if you set the width (or height) to 100% it will not take margin and the padding.

Using box-sizing : border-box, you can ensure that your container will always be the size you want even if you put margin or padding.

Padding to contain text in a wrapper

4 Answers4