Ionic grid trouble - ionic-framework

Question

<ion-grid>
<ion-row wrap style="background-color: #25dfc3">
<ion-col>
<ion-slides pager>
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
<ion-row style="background-color: #ffffff;">
<ion-col>Amethyst!</ion-col>
</ion-row>
</ion-grid>
Is there any way to make my first row bigger than the second? I've been watching many tutorials but it seems that the flexbox solutions doesn't help me.

Answer 1

Actually you can just add a height in the first row.
<ion-grid>
<ion-row wrap style="background-color: #25dfc3; height: 300px;">
<ion-col>
<ion-slides pager>
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
<ion-row style="background-color: #ffffff;">
<ion-col>Amethyst!</ion-col>
</ion-row>
</ion-grid>
View it here:
https://stackblitz.com/edit/ionic-rhdvzq

Answer 2

i have solved the issue with flex like so:
<ion-grid>
<ion-row class="top">
<ion-col>
<ion-slides pager>
<ion-slide>
<div class="sprite">
</div>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
<ion-row style="background-color: #ffffff;">
<ion-col col-1></ion-col>
<ion-col col-10>
<button ion-button block (click)="login()" >Inicia sesión con Facebook</button>
<p></p>
<button ion-button block color="secondary" (click)="pushPage()" >Accesa con tu teléfono</button>
<p></p>
Términos y condiciones
</ion-col>
<ion-col col-1></ion-col>
</ion-row>
</ion-grid>
login-tutorial{
.top {
flex: 4;
background-color: #e8343b;
}
.button-block{
margin-top: 14px;
}
a {
text-align: center;
font-size: .7em;
float: left;
margin-left: 30%;
margin-top: 18%;
}
h1 {
color: #fbb034;
}
.swiper-pagination-bullet-active {
background: #fbb034;
opacity: 1;
}
.sprite {
width: 47.25px;
height: 51px;
/*margin-left: 42%;*/
margin: auto;
background-image: url("../../assets/imgs/babyL.png");
animation: luigui 1s steps(11, end) infinite;
}
#keyframes luigui {
from {
background-position: 0px;
}
to{
background-position: -549.25px;
}
}
}
screenshot 1
Then I copied the same code to another app, however, the result is different. It seem like the flex is not working...
screenshot 2