Currently, I am delving into the world of Ionic app development. Although I have grasped the concept of the Grid layout, I find myself hitting a roadblock when it comes to adjusting or removing spaces between rows 2 and 3 in my app interface, as illustrated in the screenshot below:
The HTML code snippet that I am working with is as follows:
<ion-content padding>
<ion-row>
<ion-label> I am good I do not want any space.</ion-label>
</ion-row>
<ion-row>
<div >
<div class="inner">
<ion-label *ngIf="!inverse" no-margin>1 USD = 67 INR</ion-label>
<ion-label *ngIf="inverse" no-margin>1 INR = {{(1/67) | number }} USD </ion-label>
</div>
<button (click)="inverse=!inverse" ion-button clear class="iconWidth" color="dark"> <ion-icon name="swap" class="rotate"></ion-icon></button>
</div>
</ion-row>
<ion-row>
<p>Can you help me to get rid of space between this row and above</p>
<ion-label> Thanks</ion-label>
</ion-row>
</ion-content>
In addition, here is the SCSS style sheet snippet:
page-home {
.rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-bottom: 15px;
}
.inner{
display: inline-block;
width:70%;
}
.iconWidth{
width:20%;
}
}
Is there a way for me to customize the spacing between row 2 and row 3?