Hy guys.
Im working on a layout with 2 rows and in each row there sould be 2 cards.
What i have at the moment:
home.html
<ion-content padding class="card-background-page">
<h2 color="white">Explore</h2>
<div class="row">
<div class="col">
<ion-card>
<img src="assets/img/card-saopaolo.png"/>
<div class="card-title">São Paulo</div>
<div class="card-subtitle">41 Listings</div>
</ion-card>
</div>
<div class="col">
<ion-card>
<img src="assets/img/card-amsterdam.png"/>
<div class="card-title">Amsterdam</div>
<div class="card-subtitle">64 Listings</div>
</ion-card>
</div>
</div>
<div class="row">
<div class="col">
<ion-card>
<img src="assets/img/card-sf.png"/>
<div class="card-title">San Francisco</div>
<div class="card-subtitle">72 Listings</div>
</ion-card>
</div>
<div class="col">
<ion-card>
<img src="assets/img/card-madison.png"/>
<div class="card-title">Madison</div>
<div class="card-subtitle">28 Listings</div>
</ion-card>
</div>
</div>
</ion-content>
And my hime.scss:
page-home {
.card-background-page {
ion-card {
position: relative;
text-align: center;
}
.card-title {
position: absolute;
top: 36%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff;
}
.card-subtitle {
font-size: 1.0em;
position: absolute;
top: 52%;
width: 100%;
color: #fff;
}
}
}
The problem is that my layout ignors the col and rows.
It displays my cards like in a list. so there is always one whitch takes 100% width of the layout. Then the next is blow that and so on.
I want 2 with 50% width in one row.
Please Help