Text-wrap on h2 iOS in landscape

I have a h2 and normally it gets wrapped but when i emulate in the iPhone 7 emulator and put it in landscape the text goes of the page. Any idea?


Normal

Landscape





.newsHeader {
    height: 200px;
    background-image: url(../assets/img/header/Vooraanzicht_Goffertstadion_2HH.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    color: #fff;
    overflow: hidden;
    position: relative;

    &:after {
      content: '';
      top: 0;
      left: 0;
      position: absolute;
      right: 0;
      bottom: 0;
      background: url(../assets/img/header/bg-slider.png) 100% 100%;
    }

    h2 {
      color: #fff;
      position: relative;
      z-index: 1;
      top: 90px;
      top: 9.0rem;
      font-weight: 600;
      left: 3%;
      display: table-cell;
      vertical-align: middle;
    }
  }

 <div class="newsHeader" (click)='itemSelected($event, firstPost?.id);'>
        <h2>{{ firstPost?.title.rendered }}</h2>
    </div>

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios Look at the console and network tabs for errors.

Ow I didn’t know you could do that. Fixed it thanks :slight_smile:

Could you share the solution for future readers please?

Somehow when I opened my app in the emulator today the wrapping was back to normal. So honestly I don’t know :disappointed_relieved:

1 Like