Larger text cut off by ion-nav-view

ionic-v1
1

I have some content that goes at that the top of an ion-view, which sits under an ion-nav-view. When the text reaches a certain size, it goes under the nav.

Is there an “Ionic” way to work around this or what might be a more proper CSS way to prevent this?

The style I’m applying has a font-size: 50px; Setting.

The view:

<ion-view title="Example">
    <ion-nav-buttons side="left">
        <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content class="has-header">
        <my-directive></my-directive>
    </ion-content>
</ion-view>

The template HTML from the directive:

<article class="my-container-style">
    <span class="my-content-style">SOME CONTENT</span>
</article>

scss:

.my-cntent-style {
  font-size: 50px;
  font-weight: bold;
}

The result