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

[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

.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 :

<!-- 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 :

.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

@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 ?

 

[nilovsergey]

Searching for decision I found a hint not to make separate media queries for individual HTML elements, but media queries for the entire page layout, as a) so that the entire page is a single column in narrow viewports, b)two columns in medium-wide viewports and c) three columns in wide viewports. But not sure how that can be implemented... Please refs to examples...