Change Ionic header size

Hi all,

I'm working on an app at the moment and I'm trying to change the header size to make it taller. I've seen lots of other posts asking the same question and it seems that the advice for changing the header size is as simple as altering a few lines of CSS. Like adding this in:

.bar-header {
height: 75px !important;
border-bottom: 2px solid red; //added this in so i can see where the bottom of the bar actually is
}
.has-header {
top: 75px !important;
}

This works beautifully in the browser view but when I test on an actual mobile it doesn't work. The header area hasn't changed. Any content within the header area overflows into the content area.

Does anyone have any ideas as to why it's doing this? Could be to do with the status bar, but not sure.

All suggestions gratefully received,

Thanks! :0)

Hannah