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/forum/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