Css best practices for responsive header

1

Hi everybody,

I want to modify the header and subheader css heights to make them responsive (I use media queries on font-size and then `rem`` units everywhere).
I am doing this for now, but I see that there are special classes for iOS generated by ionic to leave some space for the status bar.

Can you help me figure out all the css I need to make this clean ?
Thanks

.bar {
	height: 3.66rem;
}
.has-header {
    top: 3.66rem;
}
.bar-subheader{
    top: 3.66rem;
    height: 3.66rem;
}
.has-subheader {
     top: 7.32rem;
}
2

Can someone help on this please ?

3

Hi @LouisR,

Could you please provide some details on what you are trying to achieve, or maybe some pictures illustrating it?
This way, it would be much easier for users to help you :slight_smile:

Best of luck!

4

Hi @leopq thanks a lot for your message.
I discovered that there is a solution to work with rem units in ionic here
I have not tried it yet, but I think it’s gonna solve my problem here.