ZombieChowder February 2016

Boostrap columns colliding

Whenever I resize my website to a mobile view of 320 x 480, two of my columns filled with text collide into each other and mash up the text. I tried doing it without columns using just "container-clearfix" but it didn't solve my problem.

The first image shows how the website text looks on 320 x 480 for small mobiles image 1

Here is the JS Fiddle : 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 le        

Answers


Lalji Tadhani February 2016

Change position on media query

@media only screen 
     and (min-device-width : 320px) 
     and (max-device-width : 480px) {
    .US{
      position: relative;
      overflow:auto;
      bottom: 250%;
      left: 15%;
      text-align: center;
     }
     .EU{
     position: relative;
     overflow:auto;
     bottom: 250%;
     right: 15%;
     text-align: center;
     }
     }


Head In Cloud February 2016

You have used position:absolute in many elements inside main container

That collide with each other and getting same position

Make one parent container and give position:absolute and set child container according to your requirement

Post Status

Asked in February 2016
Viewed 3,595 times
Voted 5
Answered 2 times

Search




Leave an answer