My website has a problem when viewed on mobile at 320 x 480 resolution. Two columns filled with text collide and mash up the text together. I initially tried without using columns, just "container-clearfix," but that did not resolve the issue.
Check out this image showing how the text appears on small mobile screens at 320 x 480: image 1
Here is the JS Fiddle link for reference: http://jsfiddle.net/52VtD/14124/
#big-image {
position: relative;
z-index: -1;
width: 100%;
height: 600px;
background-repeat: no-repeat;
background-size: cover;
}
.col-md-12 {
padding-left: 0px;
padding-right: 0px;
}
#text-four {
position: absolute;
overflow: hidden;
text-align: center;
bottom: 450px;
vertical-align: middle;
left: 20%;
}
#text-four-p {
position: absolute;
overflow: auto;
bottom: 830%;
left: 15%;
text-align: center;
}
.US {
position: absolute;
overflow: auto;
bottom: 250%;
left: 15%;
text-align: center;
}
.EU {
position: absolute;
overflow: auto;
bottom: 250%;
right: 15%;
text-align: center;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#text-four,
#text-four-p {
display: none;
}
}<div class="row">
<img src="image/4.jpg" class="img-responsive" id="big-image">
<div class="col-sm-12">
<div class="carousel-caption">
<h3 id="text-four"> HOW TO WATCH SHORTSHD (US) OR SHORTSTV (EUROPE)</h3>
<p id="text-four-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet bibendum lorem. Nullam molestie lectus eros, vel ornare mi</p>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="carousel-caption">
<div class="US">
<h2> ShortsHD (US)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at lobortis diam. Nam quis mauris ipsum. Fusce ac felis pharetra, egestas ante ut, malesuada quam. Vestibulum id arcu eget ipsum semper vestibulum. Nullam vitae ipsum tellus.
Aenean nec sem consequat, mattis dolor eu, eleifend lectus. Nam id purus hendrerit, lacinia massa a, ullamcorper massa. Cras eget risus ut nulla cursus vestibulum. Duis id tellus fringilla, ultricies est id, sagittis velit. Morbi quis ante
pharetra, tincidunt neque non, ultricies diam. Cras ornare risus vel nisl gravida, non viverra lacus efficitur. Nam consectetur dolor eros, quis iaculis arcu accumsan at. Aenean vitae lectus eros.</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-pull-6">
<div class="carousel-caption">
<div class="EU">
<h2> ShortsTV (EU)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at lobortis diam. Nam quis mauris ipsum. Fusce ac felis pharetra, egestas ante ut, malesuada quam. Vestibulum id arcu eget ipsum semper vestibulum. Nullam vitae ipsum tellus.
Aenean nec sem consequat, mattis dolor eu, eleifend lectus. Nam id purus hendrerit, lacinia massa a, ullamcorper massa. Cras eget risus ut nulla cursus vestibulum. Duis id tellus fringilla, ultricies est id, sagittis velit. Morbi quis ante
pharetra, tincidunt neque non, ultricies diam. Cras ornare risus vel nisl gravida, non viverra lacus efficitur. Nam consectetur dolor eros, quis iaculis arcu accumsan at. Aenean vitae lectus eros.</p>
</div>
</div>
</div>
</div>
</div>
</div>