Horizontal images scroll, text inside goes overboard - html

Question

The text inside my divs goes over to the next image, from my image horizontal scroll. I want each text inside each image but I am trying everything and nothing works!

Answer 1

The overlapping text is caused by the white-space: nowrap; on the .list-inline selector. So lets add white-space: normal; to the .DocumentList p selector to fix this.
Here is the full updated CSS:
.factorSection{
display:none;
}
#section2-05{
padding-right:0;
padding-left: 10px;
padding-bottom:0;
}
#section2-05 h2{
color: #424242;
font-weight:900;
font-size: 1.7em;
line-height: 1.2em;
margin-bottom: 0;
}
#section2-05 .col-lg-12 p{
font-size: 1.2em;
line-height: 1.4em;
margin-bottom:1em;
}
.section2-05_phone{
display:block;
overflow-x: scroll;
width: auto;
white-space: nowrap;
}
.documentList{
overflow-x:scroll;
overflow-y:hidden;
height:200px;
width:100%;
padding: 0 15px;
}
.factorImgText{
position:absolute;
z-index: 1;
padding: 0 5px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0;
text-align: center;
width:90%;
}
.factorImg1, .factorImg2, .factorImg3, .factorImg4{
position: relative;
display: inline-block;
margin: 8px 8px;
box-shadow: 2px 2px 4px #bbb;
border-top-right-radius: 4px;
width: 320px;
height: 100%;
vertical-align: bottom;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
height:370px;
}
.factorImg1{
background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
margin-right:3px;
}
.factorImg2{
background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
margin-right:3px;
}
.factorImg3{
background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
margin-right:3px;
}
.factorImg4{
background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
margin-right:3px;
}
.list-inline {
white-space:nowrap;
}
.DocumentList h6, .DocumentList p{
color:#fff;
font-weight:900;
}
.DocumentList h6{
font-size: 1em;
text-align: center;
width: 100%; /* Changed from 90% --> 100% to help center. */
margin: 0; /* Added to help center. */
}
.DocumentList p{
font-size: .75em;
line-height: 1.4em;
margin-bottom: 0;
white-space: normal; /* Add to fix the overlapping text. */
}
<div class="row row-fluid section2-05_phone">
<div class="DocumentList col-lg-12">
<ul class="list-inline">
<li class="factorImg1">
<div class="factorImgText">
<h6>2 DÍAS ANTES… ¡ZURPRAIS!</h6>
<p>Con tu pack de experiencias, tu edad y tu perfil (familias, parejas, amig#s…), organizaremos tu plan… Y como es Zurprais, 2 días antes sabrás lo que es.</p>
</div>
<div class="overlay1"></div>
</li>
<li class="factorImg2">
<div class="factorImgText">
<h6>PLANES CON UN PLUS</h6>
<p>Un atardecer en velero… ¿con cava y ostras? Un brunch… ¿entre viñedos? Todas tus experiencias tendrán un toque extra que las hará aún más especiales.</p>
</div>
<div class="overlay2"></div>
</li>
<li class="factorImg3">
<div class="factorImgText">
<h6>EMOCIÓN DESDE LA RESERVA</h6>
<p>Al reservar, empieza el juego. Recibirás algunas pistas sobre las actividades que te podrían tocar. Para que vayas calentando motores.</p>
</div>
<div class="overlay3"></div>
</li>
<li class="factorImg4">
<div class="factorImgText">
<h6>CAMBIO GRATUITO</h6>
<p>¡Segurísimo que tu plan te va a encantar! Pero para que estés tranquil#: si no te gusta lo que te hemos organizado, te preparamos uno diferente para otro día.</p>
</div>
<div class="overlay4"></div>
</li>
</ul>
</div>
</div>