Facing css alignment problem

@flycoders_sourav wrote:

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

Posts: 4

Participants: 2

Read full topic