I want to design a responsive design. But i can’t able to do below my html
<ion-card class="res-card">
<span class="open">Open</span>
<img class="img-size" src="https://cde.peru.com//ima/0/1/6/3/2/1632689/611x458/50-best-restaurants.jpg">
<span class="card-img-price">Oriental</span>
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
</ion-card-content>
</ion-card>
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
template: `
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col *ngFor="let card of myCards" col-12 col-xl-2 col-lg-3 col-md-4 col-sm-5>
<ion-card>
<img [src]="card.img" />
<ion-card-header>{{ card.title }}</ion-card-header>
<ion-card-content>{{ card.content }}</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
`,
styles: [`
page-home {
@media (max-width: 576px) {
ion-card-content {
font-size: 2rem !important;
}
}
@media (max-width: 820px) {
.mobile-fab {
display: none;
}
}
@media (min-width: 820px) {
.web-fab {
display: none;
}
}
}
`]
})
export class HomePage {
myCards = [
{
img: 'https://loremflickr.com/100/100',
title: 'Card 1',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et'
}, {
img: 'https://loremflickr.com/99/99',
title: 'Card 2',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et'
}, {
img: 'https://loremflickr.com/98/98',
title: 'Card 3',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et'
}, {
img: 'https://loremflickr.com/97/97',
title: 'Card 4',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et'
}, {
img: 'https://loremflickr.com/96/96',
title: 'Card 5',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et'
}
]
constructor(public navCtrl: NavController) { }
}
When you increase the width you get more cards in one row.