Kasun Kasun - 2 months ago 7
CSS Question

how to make a div responsive after adding fixed width in bootstrap

I am using a bootstrap carousel and for later styling purposes I added it inside a div and gave a fixed width. And also after the carousel I added 3 thumbnails which also inside that same div. Now I'm having problems regarding responsiveness of carousel and thumbnails because of the fixed width div.

Here's the code

<div class="container-fluid homecontent">
<!-- Slider -->
<div id="#slider_style">
<div id="carousel-example-generic" class="carousel slide customslider" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/nysm2.jpg" alt="nysm2">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/civil war.jpg" alt="CA civil war">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/deadpool1.jpg" alt="deadpool">
<div class="carousel-caption">
...
</div>
</div>
...
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

<!-- home page movies -->
<div class="container-fluid" id="maincontent">

<div class="row">
<div class="col-md-4 col-xs-12">
<div class="thumbnail">
<img src="images/deadpool1.jpg" alt="deadpool" id="mainconimg">
<div class="caption">
<h3 id="trop">Deadpool</h3>
<p><a href="#" class="btn btn-primary" id="btnview" role="button">View</a></p>
</div>
</div>
</div>


<div class="col-md-4 col-xs-12">
<div class="thumbnail" id="medalthumb">
<img src="images/civil war.jpg" alt="CA: Civil War" id="mainconimg2">
<div class="caption">
<h3 id="medal">CA: Civil War</h3>
<p><a href="#" class="btn btn-primary" id="btnview2" role="button">View</a></p>
</div>
</div>
</div>

<div class="col-md-4 col-xs-12">
<div class="thumbnail" id="souvnthumb">
<img src="images/nysm2.jpg" alt="nysm2" id="mainconimg3">
<div class="caption">
<h3 id="souvn">Now You See Me 2</h3>
<p><a href="#" class="btn btn-primary" id="btnview3" role="button">View</a></p>
</div>
</div>
</div>

</div>
</div>
</div>


Here's the CSS

.homecontent{
width:910px;
}

.customslider{
-webkit-box-shadow: -1px 5px 61px -6px rgba(9,212,40,1);
-moz-box-shadow: -1px 5px 61px -6px rgba(9,212,40,1);
box-shadow: -1px 5px 61px -6px rgba(9,212,40,1);
}


Need some tips to solve this..

Answer

You could also try and give it max and min width as per your need and add width in percentage.

In your case it could be

 div{
 max-width:910px;
 width:100%;/* As per your preference */
 }

So div would get up to a maximum of 910 width and on other screen sizes it takes up the percentage you prefer. You could also mention minimum width as well if needed. That way you can fix the width range and rest gets adjusted as per percentage.

Hope this helps.