CODEWITHSUNDEEP
htmlcssangularjs
calthoff
calthoff

Reputation: 386

Thumbnail pictures breaking early

I have a group of thumbnails that display 3 at a time horizontally. When I my browser goes below 988 pixels, the 3 horizontal thumbnails go vertical even though there is plenty of space. Any idea how to avoid this?

<div class="container">
<!-- main photo and description units -->
<div class="mainUnit"  ng-repeat="product in sc.display" ng-init="outerIndex = $index">
    <div class="row col-md-offset-3">
        <div class="col-md-8">
            <div class="aboveImage" ng-model="sc.store.products">
                {{product.sale_title}} picked out by <span class="pink">{{product.fashionista.full_name}}</span><br>
            <div><i>{{product.fashionista.location}}</i> {{product.released_at | date}}</div><br>
                <img class="mainImage" ng-src="{{sc.ci_array[$index].image}}"> </img><br>
                {{product.user}} | <span class="pink">{{product.sale_price | currency}}</span>
            </div>
        </div>
    </div>
    <!-- thumbnails   -->
    <div class="row col-md-offset-4" ng-repeat="list in sc.final_thumb_array[outerIndex]">
            <ul id="navlist">
                <li class="col-md-2" ng-repeat="img in list" ng-click="click(img)">
                    <img class="thumbnail" ng-src="{{img.image}}"/>
                </li>
            </ul>
    </div>
    <div class="row col-md-offset-4">
        <div class="description col-md-6">
            <p>{{product.sale_description}}</p>
        </div>
    </div>
</div>

Upvotes: 0

Views: 38

Answers (1)

jarz
jarz

Reputation: 732

You could use 

col-xs-*

that will propagate up, so it's equivalent to having: 

"col-xs-* col-sm-* col-md-* col-lg-*"

on your column element.

Upvotes: 1

Related Questions