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

Question

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>View</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>View</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>View</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 1

You can't set a fixed width to an element and expect it to be responsive. Use Bootstrap's built-in grid system and easily set width according to the screen size.
Set the column width by adding a .col class that defines screen size (sm, xs, xl...) and width from 1 to 12:
<div id="carousel" class="col-sm-12 col-md-8 col-xl-2">
---content---
</div>
In this example, when the screen is small ("sm"), the element will span to 12/12 of the screen width. When it's extra-large ("xl") - it'll span to 2/12 the width of the screen, and so on.
This way, you can define custom width to any desired screen. You can even reconfigure the .col classes and give them any width you want in pixels.

Answer 2

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.

Answer 3

You're not going to have responsiveness with fixed dimensions.
Use a percentage (%) or viewport width (vw) unit. For example...
.homecontent{
width: 80%;
}
.homecontent{
width: 80vw;
}