css - Design a component responsiveness on all the view ports -

component:

my-profile.html

<div class="presentation margin-left-150">   <img src="./assets/images/img1.jpg" alt="image" />   <p>hilda isable sanchez</p>   <p>186579</p>   <p>hilda.sanchez.gmail.com</p>   <p>800.457.5687</p> </div> 

my-profile.scss

my-profile {     .presentation {         position: relative;         display: inline-block;         width: 100%;         height: 100%;         overflow: hidden;         img {             width: 30%;             height: 30%;         }         .margin-left-150{           margin-left: 150px;         }     } } 

page:

settings.html

<ion-content class="content">   <ion-grid no-padding>     <ion-row class="header">       <ion-col col-6>         <my-profile></my-profile>       </ion-col>     </ion-row>     <ion-row class="details">       <ion-col col-12>        </ion-col>     </ion-row>   </ion-grid> </ion-content> 

settings.scss

page-settings {     .content {         ion-grid {             height: 100%;         }         .header {             flex: 1;             background-color: color($colors, secondary);         }         .details {             flex: 2;         }     } } 

it looks good on mobile device below:

but horrible on ipad:

can please me design correctly on viewports of devices? in other words nicely centered my-profile.html component on device sizes (responsiveness).

note: know happened due margin-left-150.but how can center properly?

to center inline-block element horizontally, set parent text-align: center

i removed width: 100% presenation or else won't center being full width of parent

my-profile.html

<div class="presentation">   <img src="./assets/images/img1.jpg" alt="image" />   <p>hilda isable sanchez</p>   <p>186579</p>   <p>hilda.sanchez.gmail.com</p>   <p>800.457.5687</p> </div> 

my-profile.scss

my-profile {     text-align: center;     .presentation {         position: relative;         display: inline-block;         height: 100%;         overflow: hidden;         text-align: left;            /*  reset left align  */         img {             width: 30%;             height: 30%;         }     } } 

---

another option of course flexbox. can drop height: 100% flex items in row direction default fill parent's height (align-items: stretch).

my-profile.html

<div class="presentation">   <img src="./assets/images/img1.jpg" alt="image" />   <p>hilda isable sanchez</p>   <p>186579</p>   <p>hilda.sanchez.gmail.com</p>   <p>800.457.5687</p> </div> 

my-profile.scss

my-profile {     display: flex;     justify-content: center;     .presentation {         position: relative;         overflow: hidden;         img {             width: 30%;             height: 30%;         }     } }