How to add device for ios 11+ in ready layout ? Options

[nilovsergey]

With bootstrap 4.2 I make app with 3 devices (small <= 360px, medium > 360px and <= 768px, big width> 768px and max-width: 1024px) and in my
css file I have a lot of conditions, like

CODE

.content {
    word-wrap: break-word;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
    max-width: 280px;
    @media only screen and (min-width: 360px) and (width<= 768px) {
        max-width: 280px;
    }
    @media only screen and (width > 768px) and (max-width: 1024px) {
        max-width: 460px;
    }
}
...
.iframe-youtube-video-list {
    width: 400px;
    height: 320px;
    @media (width <= 360px) {
        width: 280px;
        height: 220px;
    }
    @media (width> 360px) and (width<= 768px) {
        width: 400px;
        height: 320px;
    }
    @media (width> 768px) and (max-width: 1024px) {
        width: 400px;
        height: 320px;
    }
}

In my layout I have some elements right aligned, which I made with blade/html layout :

CODE

<!-- This is layout for medium and big devices -->
<div class="user-reactions-block-wrapper">
      <x-news-user-visits id="{{ $news->id }}"></x-news-user-visits>
      <x-news-user-reactions id="{{ $news->id }}" device="full"></x-news-user-reactions>
      <div class="news-published-at-block">
            {{ $news->published_at->format('d.m.Y') }}
      </div>
</div>

<!-- This is layout for small devices -->
<div class="user-reactions-block-wrapper-xs">
     <x-news-user-reactions id="{{ $news->id }}" device="xs"></x-news-user-reactions>
     <div class="user-reactions-block-wrapper-news-devider-xs">
           <div class="news-published-at-block">
                  <x-news-user-visits id="{{ $news->id }}"></x-news-user-visits>
                  {{ $news->published_at->format('d.m.Y') }}
            </div>
     </div>
</div>

and defined styles :

CODE

.user-reactions-block-wrapper {
    height: 24px;
    display: flex;
    @media (max-width: 768px) {
        display: none;
    }
    flex:1;
    justify-self: flex-end;
    align-items: flex-end;
    align-self:stretch;
}

.user-reactions-block-wrapper-xs {
    display: none;
    @media (width <= 768px) {
        display: flex;
        line-height: 12px;
    }
    flex:1;
    flex-direction: column;
    padding-top: 10px;
}

.news-published-at-block {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    padding: 0;
    margin-bottom: 6px;
    margin-right: 20px;
    font-size: 14px;
    @media (max-width: 360px) {
        font-size: 12px;
        padding-top: 15px;
    }
}

.news-published-at-block {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    padding: 0;
    margin-bottom: 6px;
    margin-right: 20px;
    font-size: 14px;
    @media (max-width: 360px) {
        font-size: 12px;
        padding-top: 15px;
    }
}

I proposed members of our team to make some tests on there devices
and got a feedback that on iPhone XR ( ios 11+ ) which has sizes 414 * 896
and resulting feedback was that right part of the page content is not visible.
I suppose that happened as condition

CODE

    @media (width> 360px) and (width<= 768px) {

was applied here and all right part of the page (768 - 414 = 352)px were cut off.
Any suggestions how that can be fixed? Also I know that there a lot of different devices with different width ?