I've searched through all the SO questions and tried Google, but I still can't find an answer. I have a bootstrap layout and I want the content to hide from both sides (left and right) when the browser is resized.
If I use
overflow-x:hidden, it only hides content from the right sideIf I apply negative margin, the layout gets messed up
In the code snippet provided, you can see that currently only the right side image hides when resizing the browser. However, I need the page to hide content from both sides. I'm looking for a CSS-only 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-->