Html
<ion-card>
<ion-card-header>
<ion-row justify-content-between>
<ion-col col-auto>
<img src="assets/img/icon2.png" item-left class="icon-img-service" />
</ion-col>
<ion-col>
<ion-row text-wrap>
<h2>Service Request</h2>
</ion-row>
<ion-row text-wrap>
<ion-col col-6 class="col-align-service">
<p style="font-weight: bold;">Electricity</p>
<p>Lighting Problem</p>
<p style="font-weight: bold;">Request No:25000</p>
<p ></p>
</ion-col>
<ion-col col-6 class="col-left">
<p style="font-weight: bold;">Status</p>
<p ><ion-badge item-end>On hold</ion-badge></p>
</ion-col>
</ion-row>
<ion-badge item-end class="more-btn">More..
</ion-badge>
</ion-col>
</ion-row>
</ion-card-header>
</ion-card>
.css
.col-left{
border-left: 1px solid black;
height: 57px;
padding: 0px 0px 0px 8px;
}
.col-align{
padding: 2px;
}
.more-btn {
border-radius: 4px;
color: #fff;
background-color: #222;
float: right;
}
.col-align-service{
padding: 2px;
}
.icon-img-service{
max-width: 70%;
border: 0;
}
I want to remove space between icon and text
how can i do that.
please anyone help me out
Thnaks