anuj khandelwal anuj khandelwal - 16 days ago 5
CSS Question

Hide overflow inside div content from left side when browser resize in bootstrap

I have read all the SO question and do google but can't answer. I have a bootstrap layout and I need when browser resize content to hide from both side (left and right).


  • If I use
    overflow-x:hidden
    then it's hidden from right only

  • If I give margin in negative then layout goes wrong



As you see in code. When browser resizes only right side image hide. But I need that page hide from both sides. I need only CSS solution please.



body {
overflow-x:hidden;
}
.wrapper {
width: 1170px;
margin: 0 auto 0 -585px;
position:relative;
left:50%
}
.left-img {
width: 600px;
height: 700px;
}
.right-img {
width: 700px;
height: 600px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="wrapper">
<div class="col-xs-6">
<img src="http://www.w3schools.com/w3images/lights.jpg" class="img-responsive left-img">
</div>

<div class="col-xs-6">
<img src="http://www.w3schools.com/w3images/lights.jpg" class="img-responsive right-img">
</div>

</div><!-- end wrapper-->




Answer

Add this to your wrapper and it will work. I don't know if it's the best solution but it works because it must overflow of the left screen there must be set margin to a negative number (half of the wrapper width).

Live example

.wrapper {
   width:1270px;
   margin:0 auto 0 -635px; 
   position:relative; 
   left:50% 
}

I think, there could be a problem on small screens. But you have an example how to do it and some specific screens you can target by media queries.

Comments