Responsive Grid

ionic-v1
1

Responsive grid works perfectly on web, and on my 10inch tablet.
However, it doesnt work on my 7 inch tablet, the items are listed vertically instead of being listed horizontally. I use col-25 which is appropriate for my categories. Even if i tried col-50, there was no difference.

Here’s the 10 inch (works perfect)

image
10inch.jpg1080×1920 94.9 KB

and 7 inch

image
7inch.jpg1080×1920 111 KB 

<ion-view class="categories">
<ion-content>
    <div class="row responsive-sm" style="flex-wrap: wrap; width:100%; padding-top:50px;" ng-init="loadCategories()">
        <div class="col col-25 grid" ng-repeat="category in categories">
            <a class="col" ui-sref="home.categories.detail({ categoryid: category.id })">
                <div class="module" back-img="{{category.imageUrl}}">
                    <header>
                        <h1>{{category.title}} </h1>
                    </header>
                </div>
            </a>
        </div>
    </div>
</ion-content>
2

Could you create a codepen example? Also, what dod you have for media queries?

3

I fixed the issue by removing " row responsive-sm" and changing the above code with this;

<div class="col col-25" ng-repeat="category in categories">
 <a class="col col-25" ui-sref="home.categories.detail({ categoryid: category.id })">

Thank you.