Containers 1. I can't make my test to stick inside containers

Containers 1. I can't make my test to stick inside containers
0.0 0

#1

Hi everybody!!
And thank you all who take the time to read and post.

I recently was working in the basic front end development projects and I have some issues with containers of all type (container, Jumbotron, navbar, well).
All the time, when reducing the browser size or using my mobile, all the text that I usually have inside of a container gets out of it.

Any advise will be great!

Here is one example where in the central top for the caption the text: The travel speed challenge. gets out of the white square.

To see it working:
https://codepen.io/GAMR/pen/KRqOjG

The code:

HTML

<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> <!--big problem is this think of initialize CSS do not recognize almost anything -->

<div class="container"> <!--background with an image-->
  <div class="jumbotron jumbo-color"> <!-- inside of the container otherwise will be a header-->
    <div class="row">
      <div class="col-xs-12">
        <div class="well well1-background h-1" id="center-well">
          <h1 class="text-center text-responsive" id="header-1">Space... the final frontier</h1>
          <div class="thumbnail thumb-size"><img src="https://media.wired.com/photos/5a593a7ff11e325008172bc2/master/w_628,c_limit/pulsar-831502910.jpg"> <!--big issue but not 100% resolved, I can see the caption in the horizontal way in my phone but not vertical-->
          <div class="caption text-center cap-text">The travel speed challenge.</div>          
          </div>
          <div class="row">
            <div class="col-xs-6">
              <h3 class="text-center h-3">W.A.R.P</h3>
                <div class="well well-pair">
                  <ul class="ul-li" id="warp-text"> <!--Text about warp-->
                    <li>In 1994 was published by the theoretical physicist Miguel Alcubierre in the scientific magazine Classical and Quantum Gravity, the "Alcubierre drive" or "Alcubierre warp drive" </li>
                    <li>Rather than exceeding the speed of light within a local reference frame, a spacecraft would traverse distances by contracting space in front of it and expanding space behind it, resulting in effective faster-than-light travel. </li>
                    <li>For the Alcubierre's drive, the universe is not static. The metric is a Lorentzian manifold that, if interpreted in the context of general relativity, allows a warp bubble to appear in previously flat spacetime and move away effectively faster than lightspeed.</li>  
                  </ul>
                </div>
            </div>
            <div class="col-xs-6">
              <h3 class="text-center h-3">Light Speed</h3>
                <div class="well well-pair">
                  <ul class="ul-li" id="light-text"> <!--Text about light speed-->
                    <li> In 1905, Albert Einstein postulated that the speed of light c with respect to any inertial frame is a constant and is independent of the motion of the light source</li>
                    <li>In 1983, the metre was redefined in the International System of Units (SI) as the distance travelled by light in vacuum in 1/299792458 of a second.</li>
                    <li>In 1917, Einstein applied his theory to the universe as a whole, initiating the field of relativistic cosmology. In line with contemporary thinking, he assumed a static universe, adding a new parameter to his original field equations—the cosmological constant—to match that observational presumption</li>  
                  </ul>
                </div>
            </div>
          </div>            
            <div class="center-text h-2">
              <h2>For those who are fans of SCI FI, it is possible to find both postures in two of the biggest and known universes: Star Trek (Warp speed) and Star Wars (Light Speed). So maybe you will not see your favorite scenes with the same vision again...</h2>
            </div>
                <div>   <!-- Just to separate parts-->             
              <div class="well well-pair col-xs-6 col-lg-offset-3">
                <!-- Text in the central well-->
                <ul class="ul-li" id="warp-text">
                 <p>If you want to know more about the theory of WARP drive -><a href="https://en.wikipedia.org/wiki/Alcubierre_drive" target="_blank"><button class="btn btn-primary">WARP</button></a></p> 
                 <p>If you want to know more about the theory of WARP drive -><a href="https://en.wikipedia.org/wiki/Speed_of_light" target="_blank"><button class="btn btn-danger">LiSp</button></a></p> 
                 <p>If you want to know how to create your own page -><a href="https://www.freecodecamp.org/" target="_blank"><button class="btn btn-success">CODE</button></a></p> 
                </ul>
              </div>
                  <br>
                </div> <!-- Until here the separation-->
                  <br>
          <blockquote class="center-text">
            <br>
            <p><br>"...to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before."               </p>
            <footer><cite class="bg-primary">Yes, you are right. I'm a Star Trek Fan.</cite></footer>
        </div>
      </div>
    </div>
      <br>
      <br>
          </blockquote>
    <footer class="text-center">      
         <hr> <!--I still not found way to reduce the line-->
      <p class="h-2">Written and coded by <a href="https://www.freecodecamp.org/mavericksensei" target="_blank"><p class="bg-warning">Guillermo Molina</p></a>.</p> <!--I cannot change my name's color!!!-->
    </footer>  
  </div>
</div>
</div>
</div>
</div>

CSS

body{
  margin-top: 60px;
  background: #0C090A;
  background-image: url(https://storywarren.com/wp-content/uploads/2016/09/space-1.jpg);
  background-position: center ;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Amatic SC', cursive; 
}
.jumbo-color{
  background: #2B3856;
}
.well1-background{
  margin-top: -40px;
  margin-left: -40px;
  margin-bottom: -40px;
  margin-right: -40px;
  background: url(http://www.foupix.com/photos/2008/06/28/d20080628025432g.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.h-1{
  font-size:55px;
  color: yellow;
}
.h-2{
  font-size:40px;
  color: yellow;
}
.thumb-size{
  margin-left: 200px;
  margin-right: 200px;
}
.cap-text{
  font-size: 35px;
}
.well-pair {
   background-color: rgba(245, 245, 245, 0.9);
   border-color: rgba(245, 245, 245, 0.1);
}
.backgroundwell{
   background-image: url("http://apod.nasa.gov/apod/image/0011/earthlights_dmsp_big.jpg");
}
.h-3{
  font-size: 35px;
}
.ul-li{
  font-size: 20px;
  color: black;
  /*text-align: center;*/
}
center-well{
  background-image: url("http://www.foupix.com/photos/2008/06/28/d20080628025432g.jpg");
}

I have a bigger problem with this other
https://codepen.io/GAMR/full/MGOGPE


#2

i checked your code.You missed some responsive concepts. i forked it and made some changes to the code to specifically make the main image and thumbnail words responsive as you mentioned.
again i didn’t work on the whole page , just the main image plus the thumbnail texts. cause im tired af today :sleepy: May be tomorrow or someday in free time i can work on the whole responsiveness.
anyway here’s the link to my forked version.play with the css more to make it more responsive :