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.

[nilovsergey]

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.

Could, you please, give more details/an example/reference to such decision ?

[Christian J]

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.

Could, you please, give more details/an example/reference to such decision ?

Impossible to say without seeing all the HTML and what kind of CSS layouts you want. I'd start with making a layout for the smallest viewports (like mobiles in portrait orientation), then add increasingly complex layouts for such viewport sizes that can handle them. Maybe something like this:

CODE

/* basic CSS (fonts, colors), single column layout */
div.container {background: red;}

/* perhaps two columns */
@media screen and (min-width: 700px) {
div.container {background: lime;}
}

/* perhaps three columns */
@media screen and (min-width: 1000px) {
div.container {background: yellow;}
}

/* perhaps four columns */
@media screen and (min-width: 1500px) {
div.container {background: blue;}
}

Both the number of @media queries and the min-width breakpoint values above are completely arbitrary. The following sounds like good advice on what actual values to choose:

"How to choose breakpoints

In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.

There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targeting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as breakpoints."
https://developer.mozilla.org/en-US/docs/Le...ose_breakpoints

[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>