How to responsive Ionic2 Header like this?


#1

Hi, i am absolutely beginner to Cross platform after study on React Native, Native Script, Ionic2. and I decide to use Ionic2 in my project. but I feel very headache to style header in my app. I just want to design ion-header to be like this with responsive but I still don’t know how to do that. can someone please help and clarify me. how to make header like this. thank you.

I just want to responsive with all resolution device. but I still can not think how to do that.

this is What I do.

<ion-header>
  <div>
    <ion-row no-lines>
      <ion-col width-10>
        <ion-avatar class="img-thumb">
          <img src="assets/image/logo.png" />
        </ion-avatar>
      </ion-col>
      <ion-col width-90 class="item no-padding">
        <ion-row>
          <ion-col width-50>
            Name : John Rambo
          </ion-col>
          <ion-col width-50>
            Place : Earth
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col width-50>
            Status : Single
          </ion-col>
          <ion-col width-50>
            Gender : male
          </ion-col>
        </ion-row>
      </ion-col>
    </ion-row>
  </div>

  <div>
    <ion-navbar>
      <ion-title text-wrap text-center>
        <ion-label>
			Title
        </ion-label>
      </ion-title>
      <ion-buttons end>
        <button ion-button icon-only>
          Save
        </button>
      </ion-buttons>
    </ion-navbar>
  </div>
</ion-header>

and the css

.img-thumb{
    width: 9vh; 
    text-align: center;
    margin: 0;

}

.no-padding  ion-col{
    text-align: left;
    align-self: center; 
    margin-left: 18px;
}