Single column phone, double tablet

@edwrede_ZA wrote:

Hi guys

I'm wondering if someone can help me achieve a layout, where by the following HTML is showed as a single column on a phone, but instead of stretching to 1 huge and ugly column on a tablet, it is instead doubled up.

So there'd be a list of items under each other in 1 column on a phone, but the list would be 2 columns on a tablet. This is pretty standard behaviour on Bootstrap but I'm not sure how to achieve it in Ionic.

The HTML looks similar to:

<div ng-repeat="onlineContent in onlineContents" href="#" ng-if="selectedCategory == 'All' || onlineContent.Category == selectedCategory" style="margin-bottom: 15px;" ng-click="viewContent(onlineContents[$index])">
<div class="row">
<div class="col" ng-class-odd="'redCategory'" ng-class-even="'blueCategory'">
{{::onlineContent.Category}}
</div>
</div>
<div class="row">
<div class="col"><img ng-src={{onlineContent.picture}} style="height: 90px;"></div>
<div class="col" class="col col-center" style="margin-top:5px;"><strong ng-class-odd="'redTitle'" ng-class-even="'blueTitle'" >{{::onlineContent.title}}</strong><br/>
<span style="font-style: italic;">By {{::onlineContent.info§}}</span><br/><br/>
<span ng-if="onlineContent['other info'].length > 0 && onlineContent['other info'] != '' && onlineContent['other info'] != null && onlineContent['other info'] != '0' " style="font-style: bold; margin-top: 50px;"><strong>{{::onlineContent["other info"]}} credits</strong><br/><span style="margin-left: 50%; color: #E30A1A; font-size: 120%;"><strong><i class="ion-chevron-right"></strong></i></span></span>
<span ng-if="onlineContent['other info'].length == 0 || onlineContent['other info'] == '' || onlineContent['other info'] == null || onlineContent['other info'] == '0' " style="margin-top: 50px !important;"><strong>FREE</strong><br/><span style="margin-left: 50%; color: #E30A1A; font-size: 120%;"><strong><i class="ion-chevron-right"></strong></i></span></span>
</div>
</div>
<div class="row">
<div class="col" style="border-bottom: 1px solid #E30A1A;">
{{::onlineContent["last info"]}}
</div>
</div>
</div>

Thanks guys

Posts: 1

Participants: 1

Read full topic