Changing fixed width div using media queries in fluid layout - css

Question

I'm using FlexSlider to display multiple 170px wide logos in a responsive design. Currently the slider fills 100% of the fluid width of the containing div, which is contained in the overall page wrapper, but this frequently leads to half cut off pictures. I'd like instead for the slider to resize in fixed widths, so that the logos are displayed without being cut off- desktop size would show 5 logos, tablet 4, etc. However, the media queries do not seem to be affecting it all, so all I'm left with is the original width (850px) that quickly becomes too big for the screen size. Is there something I'm missing? Is it possible to mix fluid CSS with a fixed width item like this?
Slider structure:
<div class="contentwrap">
[Omitted rest of the page content]
<div class="sliderwrap">
<div class="flexslider carousel">
<ul class="slides">
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>
</div>
CSS:
.contentwrap {
width: 85.5%;
margin: 0 auto;}
.sliderwrap {
width: 850px;
margin: 0 auto;}
#media screen and (max-width: 659px) {
.contentwrap {
width: 100%;
}
#media screen and (max-width: 169px) {
.sliderwrap {
display: none;
}
#media screen and (min-width: 170px) and (max-width: 339px) {
.sliderwrap {
width: 170px;
}
#media screen and (min-width: 340px) and (max-width: 509px) {
.sliderwrap {
width: 340px;
}
#media screen and (min-width: 510px) and (max-width: 794px) {
.sliderwrap {
width: 510px;
}
#media screen and (min-width: 795px) and (max-width: 995px) {
.sliderwrap {
width: 680px;
}
#media screen and (min-width: 170px) {
.sliderwrap {
width: 850px;
}

Answer 1

You must use Carousel With Min & Max Ranges
Example - http://jsfiddle.net/Luu3c2wk/
Code:
jQuery(document).ready(function($) {
// store the slider in a local variable
var $window = $(window),
flexslider;
// tiny helper function to add breakpoints
function getGridSize() {
return (window.innerWidth < 340) ? 1 :
(window.innerWidth < 510) ? 2 :
(window.innerWidth < 800) ? 3 :
(window.innerWidth < 995) ? 4 : 5;
}
$('.flexslider').flexslider({
selector: ".slides > div.flex-col",
animation: "slide",
animationLoop: false,
itemWidth: 100,
itemMargin: 0,
minItems: getGridSize(), // use function to pull in initial value
maxItems: getGridSize(), // use function to pull in initial value
start: function(slider){
flexslider = slider;
}
});
// check grid size on resize event
$window.on('resize', function() {
var gridSize = getGridSize();
console.log(gridSize);
flexslider.vars.minItems = gridSize;
flexslider.vars.maxItems = gridSize;
});
});