Inconsistencies in the grid system

[gligoran]

I've been having trouble with the grid system breakpoints and it seems that it's been used inconsistently through the code.

My understanding is that this is the correct usage:

@media (max-width: $layout-breakpoint-sm - 1) { ... }
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) { ... }
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) { ... }
@media (min-width: $layout-breakpoint-lg) { ... }

But there are places in code where such code can be found:

@media (max-width: $layout-breakpoint-sm) { ... }
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) { ... }
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) { ... }
@media (min-width: $layout-breakpoint-lg) { ... }

It is both indeterministic and, in my opinion, wrong. The particular example is from bottom-sheet.scss, but it can be others as well (toolbar, toast, ...).

It would be really nice if this would be consolidated.

[Todd-Werelius]

+1

Here is another one

It shrinks the toolbar when the screen is 600px dependent on orientation, and it looks really quirky on desktops, and is not documented anywhere as far as I can tell.

@media only screen and (min-width: 0) and (max-width: 600px) and (orientation: portrait) {
  md-toolbar {
    min-height: 56px; }
  .md-toolbar-tools {
    height: 56px;
    max-height: 56px; } }

@media only screen and (min-width: 0) and (max-width: 600px) and (orientation: landscape) {
  md-toolbar {
    min-height: 48px; }
  .md-toolbar-tools {
    height: 48px;
    max-height: 48px; } }

[sheyooo]

Agree. This had me adding my own media breakpoints and specifying different top paddings for the body element

[ThomasBurleson]

@gligoran - RE > But there are places in code where such code can be found:

Where specifically do you see these?

[gligoran]

Here's a list I was able to find:

• bottom-sheet.scss - lines: 124, 128, and 132
• dialog.scss
• toast.scss - lines: 91 and 111
• toolbar.scss - lines: 135 and 148

Links are to the first line, but I listed the other occurrences in the same files. You can find these quickly by looking at the compiled angular-material.css and searching for (max-width: (opening parenthesis included) and checking for values that are the breakpoint instead of breakpoint - 1.

[ThomasBurleson]

@gligoran - Thank you for your persistence. Your last comment was very helpful and highlighted the issue nicely.

[gligoran]

Glad to help.

[ThomasBurleson]

Fixes are pending with PR #6082