Hello,
I want to make a web version of my App too. But I don’t like that evertyhing looks so expanded when my App is in website mode:
This is just a grid:
<ion-grid>
<ion-row text-center>
<ion-col col-6>
<button ion-button color="secondary">Secondary</button>
</ion-col>
<ion-col col-6>
<button ion-button color="secondary">Secondary</button>
</ion-col>
</ion-row>
</ion-grid>
So I thought about creating styles for each a web version and a mobil version. Such as this:
page-home {
.mobile {
.toolbar-background-md {
background: yellow !important;
}
p {
background-color: yellow;
}
}
.web {
ion-grid {
max-width: 50%;
}
.toolbar-background-md {
background: blue !important;
}
p {
background-color: blue;
}
}
}
And then check in my html which platform I am in in ion-content like this:
<ion-content [class.mobile]="platform.is('android') || platform.is('ios')"
[class.web]="platform.is('mobileweb') || platform.is('core')">
...
</ion-content>
In this way, in a browser, it looks in a way which I prefer than the earlier picture:
So my question is: is this a good approach or a terrible one? Is there anything better that I could do?
Thanks!