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]

Here's another example of using breakpoints.

To arrive at the "min-width: 39em" value, I simply made the viewport narrower (or zoomed in) until the last link in the horizontal UL list menu wrapped to a new line. Then I increased the associated Media Query's min-width so the UL menu uses its default bullet list styling unless the window is wide enough to contain a horizontal list in a signle row.

The width for two P columns are more arbitrary, just pick a value where two (or more?) columns of text would be more comfortable to read than long lines (there may also be better ways to create the columns than floating, such as Flex layouts).

CSS

CODE

/* wide enough for horizontal menu links */
@media screen and (min-width: 39em) {

    nav ul {
    margin: 0;
    padding: 0;
    }

    nav li {
    display: inline-block;
    width: 6em;
    }
}

/* wide enough for paraphs to be styled as columns */
@media screen and (min-width: 50em) {

    p {
    width: 50%;
    float: left;
    }
}

HTML

CODE

<h1>Media query break point example</h1>

<nav>
<ul>
<li><a href="">long link text</a></li>
<li><a href="">long link text</a></li>
<li><a href="">long link text</a></li>
<li><a href="">long link text</a></li>
<li><a href="">long link text</a></li>
<li><a href="">long link text</a></li>
</ul>
</nav>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>