How to set text align in all card

user_13830192 0
Viewed 46

I am using angular with ionic, I want to set text align and image in all cards equal and button with add and + and - button . But i am not get my result. Here is my result. Here is my result

But i want my page like this But I want like this

I don't know how to create button like this. Please help me. If anyone can able to help then please help me to fix this.

.serviceList{
        padding: 0px 10px;

        .card{
            display: flex;
            width: 100%;
            flex-direction: row;
            border-radius: 10px;
            box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
            margin: 15px 0px;
            position: relative;

            .image_div{
                // border-radius: 10px;
                background-position: center;
                background-repeat: no-repeat;
                background-size:  100px;
                width: 150px;
                height: 100px;

            }
            .desc_div{
  
                padding: 10px;
                .heading_lbl{
                    font-size: 20px;
                    display: block;
                    text-align: left;
                }
                .small_lbl{
                    font-size: 13px;
                    color: var(--ion-color-secondary);
                    display: block;
                    text-align: left;
                }
                .small_pricing{
                    font-size: 12px;
                    color: var(--ion-color-dark);
                    display: block;
                    text-align: left;
                }
   
                .tick{
                    width: 25px;
                    position: absolute;
                    right: 15px;
                    top: 10px;
                }
            }
        }
    }

<div class="serviceList">
      <div class="card" *ngFor="let item of services" (click)="add(item)">
        <div class="image_div" [style.backgroundImage]="'url('+ item.image +')'"></div>
        <div class="desc_div">
          <ion-label class="heading_lbl">{{item.name}}</ion-label>
          <ion-label class="small_pricing">starting at <span style="font-weight: 600;">$ {{item.price}}</span></ion-label>
          <ion-label class="small_pricing">{{item.time}}</ion-label>
          <img *ngIf="selected.includes(item)" src="assets/imgs/correct.png" class="tick" alt="">
        </div>
      </div>
    </div>
ionic-framework angular sass css html
1 Answers

Instead of adding background image you can use img element .

.card-img {
  width: 150px;
}

.card {
    display: flex;
    width: 100%;
    flex-direction: row;   
    padding: 25px 0px;
    border-bottom: 1px solid blue
  }
  .serviceList {
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
    margin: 15px 0px;
    position: relative;
    
  }
  
<div class="serviceList">
  <div class="card">
    <img class="card-img" src="https://4.imimg.com/data4/XM/BT/MY-14977507/multigrain-atta-large-800x800-500x500.jpg">
  <div class="desc_div">
    <label>Aashirwad Atta</label>
  </div>
  </div>
  <div class="card">
    <img class="card-img" src="https://image.shutterstock.com/image-photo/basmati-rice-bag-600w-1338597242.jpg">
  <div class="desc_div">
    <label>Aashirwad Atta</label>
  </div>
  </div>
<div>

Do not give height to image because its wont work properly and not support to responsive and also there is chance to stretch/ shrink image it wont look good .

user_75886480
Related