Sampath Sampath - 29 days ago 9
Sass (Sass) Question

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 a mobile device like below:

enter image description here

But Horrible on iPad:

enter image description here

Can you please help me to design this correctly on all the viewports of the devices? In other words nicely centered
my-profile.html
component on all the device sizes (responsiveness).

Note: I know this was happened due to
margin-left-150
.But how can I center it properly?

Answer Source

To center an inline-block element horizontally, you set its parent to text-align: center

I also removed width: 100% from presenation or else it won't center being full width of its 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 to left align  */
        img {
            width: 30%;
            height: 30%;
        }
    }
}

Another option is of course Flexbox. With this you can also drop the height: 100% as flex items in a row direction by default fill their 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%;
        }
    }
}