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

networking - Vagrant-provisioned VirtualBox VM is not reachable from Ubuntu host -

c# - ASP.NET Core - There is already an object named 'AspNetRoles' in the database -

ruby on rails - ArgumentError: Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only_path to true -