Pwa css ios md and browsee


#1

Hello friends
I build a pwa with ionic 4 and I do not find how to apply the css rules of each platform.
we use class ios for ios, md for android but I do not know about the web.
and how to put the css in place for an element.
for example I have an ion-button how it applied class ios, md and web?

thank you in advance


#2

If I’m not mistaken, without any custom code or property set in app.module, PWAs with Ionic inherit md style regardless of the os aka it’s either md or either ios for all platforms


#3

my problem is that if I for example I put up a button with a margin, on ios or android to have the right position then on web that will also take it into account.
as for the background I need one image for mobile and another for the web.
I need to be able to modulate my web layout that will be different from the mobile


#4

then you have to use the platform.is('') and check “where you are” and do custom stuffs I would say


#5

OK but is there anything to define browser like for android = md?


#6

not that I know but maybe, I didn’t look that much as for me, PWA and the web are the same :wink:


#7

re,
simple example is the menu,
on my browser it is apparently open and if I am on --lab it is displayed closed normal


#8

sorry I don’t understand and I’m not sure it’s related to your original question


#9

I tried for a button

.browser .button{
    margin-left: 15%;
    display: table
}
.md .button{
    margin: 0 auto;
    display: table
}

tested on my browser ok but when i do ionic serve --lab my button stays in the same place

html

<ion-button class="button" href="login">Se connecter</ion-button>

#10

the problem I gave before is the menu that is open in the browser. I may open another post for that


#11

And from where is the information .browser suppose to come? sorry I think it goes behind my knowledges, for me there is .md and .ios. I thought that if you want something else is custom code but above one of these. But maybe I’m mistaken


#12

.browser it was to test :wink:
what I’m looking for is that on mobile my button is centered and on browser desktop my button is at another place


#13

I think I know why we do not understand each other.
when I say browser is the one on my pc, I forgot to say that


#14

well to be honest I’m not sure how to do it without custom code so I won’t really be able to help, hope someone could then, sorry