Component sizing for different screen densities

Ionic Framework ionic-v3
1

We do most out testing on a Google Pixel. However, when we tested the app on a lower density Android phone and/or iPhone, some of the elements didn’t scale with the screen size.

Is there a way to set an attribute so that buttons, etc scale with different densities?

Here’s the button code we’re using:
<button *ngIf="profileCompleteness(profile)==100" class="profile-button" ion-button item-right (click)="goToProfile(profile)" round large outline>

Lower Density Phone

image
Screenshot_2017-05-04-12-37-04.png540×960 66.5 KB

Higher Density Phone
image

2

How does your .profile-button class look like? And how did you nest those buttons?

3

Warning: I’m not the developer™ :slight_smile: I’m just trying to help them track down a solution. Thanks for the help.

Here’s the profile button class in the main scss file. There is also additional info in an page specific scss file.

  .profile-button {
    position: absolute;
    bottom: 7%;
    right: 7%;
  }

Additional scss

    .profile-button {
        width: 26rem;
    }
4

Haha okay. If I was the developer, I wouldn’t temper with the width of buttons and positions. I think they should rethink the structure of their HTML. If the positioning is a problem, I would suggest to make use of the ion-grid to make sure everything is responsive (including the buttons). I think the framework should handle the widths and sizes accordingly to the corresponding item it’s in (so don’t temper with those widths).

could you provide us the template used?