javascript - text over image not responsive in bootstrap -


i have image, on putting heading on right , left side of image below

<div class="container-fluid no-padding">   <div class="row">    <div class="col-md-12">      <div class="col-sm-3 text-center image-overlapping">        <h1>hello suarj</h1>          lorem ipsum dolor sit amet, consectetur adipisicing elit. ullam omnis, ipsum eveniet minus amet.        </div>        <img src="http://oi65.tinypic.com/15oi0w9.jpg" class="ls-bg" alt="slide background" style="width:100%; height:auto;">        <div class="col-sm-3 text-center image-overlapping right">         <h1>hello suarj</h1>           lorem ipsum dolor sit amet, consectetur adipisicing elit. ullam omnis, ipsum eveniet minus amet.        </div>    </div> </div> 

this works me, not responsive mobile. how go it.

here's fiddle same.

so added media-query

 @media (max-width: 480px){    .image-overlapping {position: relative; top : 0 !important;}  } 

and added col-xs-12 div has heading.

it works me. help.


Comments

Popular posts from this blog

html - How to set bootstrap input responsive width? -

javascript - Highchart x and y axes data from json -

javascript - Get js console.log as python variable in QWebView pyqt -