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>