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 ?

[Christian J]

CODE

.content {
...
    max-width: 280px;
    @media only screen and (min-width: 360px) and (width<= 768px) {
        max-width: 280px;
    }

As a side note, the above seems redundant.

CODE

.iframe-youtube-video-list {
    width: 400px;
    height: 320px;

...
    @media (width> 768px) and (max-width: 1024px) {
        width: 400px;
        height: 320px;
    }
}

Same with the above.

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

I don't know much about Flex, but doesn't it normally prevent content from being cut off (akin to HTML tables)?

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.

That media query applies to a viewport width between 361px and 768px (such as the 414px phone in portrait mode). So it's the styling inside the media query that should apply (the max-width):

CODE

.content {
...
    @media only screen and (min-width: 360px) and (width<= 768px) {
        max-width: 280px;
    }

and here (the width and height):

CODE

.iframe-youtube-video-list {
    @media (width> 360px) and (width<= 768px) {
        width: 400px;
        height: 320px;
    }

If any of the above HTML elements (like a video?) are wider than the specified CSS, something will have to give in. Can't say what in this case.

Any suggestions how that can be fixed?

It looks like you're using the media queries in a "fragile" way. For example, why does "min-width: 360px) and (width<= 768px" result in just 280px max-width the first rule?

Instead of separate media queries for individual HTML elements, I'd use the media queries for the entire page layout, for example so that the entire page is a single column in narrow viewports, two columns in medium-wide viewports and three columns in wide viewports.