Responsive text wrapping

Question

I'm using bootstrap 3. I made a custom container, and put a section in it, with another section inside that containing text. I want the text to wrap at all screen widths. Right now, it gets cut off once the screen width is too small.

I'd rather not make an entirely new media query that's smaller (like 480px or something) because I'm using bootstrap 3 and the xs breakpoint is from 0-767. Any ideas? I realize this would be sort of awkward since the container itself is based around breakpoints (which would lead to situations where the container doesn't resize but the text wraps). Ignore the seemingly useless nested paragraph (unless this question is unsolvable without changing that).

.custom-container {
  
  width: 900px;
  margin: 0 auto;
  
}

.inner-c {
  width: auto;
  border: 1px solid #aaaaaa;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  
}

@media (max-width: 767px) {
  .custom-container {
  
  width: 500px;
  margin: 0 auto;
  
}
  }
@media (min-width: 768px) and (max-width: 991px) {
  .custom-container {
  
  width: 650px;
  margin: 0 auto;
  
}
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class = 'custom-container'>
<div class = 'inner-c'>
<p class = 'explanation-head'> Explanation</p>
    <p class = 'explanation'><p>Explanation text
<br />
<br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call this cat food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter all over house. Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really tie the room together groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake up human for food at 4am. Climb a tree, wait for a fireman jump to fireman then scratch </p></p> 
  
  </div>
</div>

Answer 1

You can add the max-width: 100%; property to the .custom-container class. I guess this will be enough. Please check:

.custom-container {
  max-width: 100%;
  width: 900px;
  margin: 0 auto;
  
}

.inner-c {
  width: auto;
  border: 1px solid #aaaaaa;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
  
}

@media (max-width: 767px) {
  .custom-container {
  
  width: 500px;
  margin: 0 auto;
  
}
  }
@media (min-width: 768px) and (max-width: 991px) {
  .custom-container {
  
  width: 650px;
  margin: 0 auto;
  
}
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class = 'custom-container'>
<div class = 'inner-c'>
<p class = 'explanation-head'> Explanation</p>
    <p class = 'explanation'><p>Explanation text
<br />
<br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call this cat food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter all over house. Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really tie the room together groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake up human for food at 4am. Climb a tree, wait for a fireman jump to fireman then scratch </p></p> 
  
  </div>
</div>

Answer 2

You should probably change your width rules to max-width, otherwise you'll see overflow.

*You also have a paragraph nested inside another paragraph tag which is invalid HTML: <p>. See Permitted Contents and Phrasing Content

Working Examples:

.custom-container {
  max-width: 900px;
  margin: 0 auto;
  background: red;
}
.inner-c {
  border: 1px solid #aaaaaa;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 4px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .custom-container {
    max-width: 650px;
    background: cyan;
  }
}
@media (max-width: 767px) {
  .custom-container {
    max-width: 500px;
    background: lightblue;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<h1 class="text-center">Stand Alone</h1>
<div class='custom-container'>
  <div class='inner-c'>
    <p class='explanation-head'>Explanation</p>
    <p class='explanation'>Explanation text
      <br />
      <br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call this cat
      food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter all over house.
      Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really tie the room together
      groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake up human for food at 4am. Climb
      a tree, wait for a fireman jump to fireman then scratch</p>
  </div>
</div>

<hr>
<h1 class="text-center">Using Columns</h1>
<div class='container'>
  <div class='row'>

    <div class='col-sm-6'>
      <div class='custom-container'>
        <div class='inner-c'>
          <p class='explanation-head'>Explanation</p>
          <p class='explanation'>Explanation text
            <br />
            <br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call
            this cat food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter
            all over house. Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really
            tie the room together groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake
            up human for food at 4am. Climb a tree, wait for a fireman jump to fireman then scratch</p>
        </div>
      </div>
    </div>

    <div class='col-sm-6'>
      <div class='custom-container'>
        <div class='inner-c'>
          <p class='explanation-head'>Explanation</p>
          <p class='explanation'>Explanation text
            <br />
            <br />Shake treat bag meowing non stop for food and drink water out of the faucet meow for food, then when human fills food dish, take a few bites of food and continue meowing when in doubt, wash eat the fat cats food use lap as chair. You call
            this cat food? eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap or lick sellotape. Spread kitty litter
            all over house. Chase red laser dot knock dish off table head butt cant eat out of my own dish yet give attitude. Give attitude. Find empty spot in cupboard and sleep all day sit in box, but who's the baby. Bleghbleghvomit my furball really
            tie the room together groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!, brown cats with pink ears this human feeds me, i should be a god but chew on cable yet wake
            up human for food at 4am. Climb a tree, wait for a fireman jump to fireman then scratch
          </p>
        </div>
      </div>
    </div>

  </div>
</div>

Answer 3

Use this code

@media (max-width: 767px) {
  .custom-container {
  width: 100%; //change width to 100%
  margin: 0 auto;

}

`