Changing fixed width div using media queries in fluid layout

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;
    });

});