bbc/gel-grid

Why is min-width 25em used in media query for gel-layout

Closed this issue · 2 comments

Why is min-width 25em used in the following media query:

@media (min-width: 25em) {
  .gel-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

As this is the smallest breakpoint, it will be applied to everything or am I missing something?

The docs ay 8px is used for padding on smaller devices but I don't see this as true.

25em translates to 400px, which is the second breakpoint of the 5 breakpoints the guideline defines. http://www.bbc.co.uk/gel/guidelines/grid#grid-sizes

By default all margins are 8px for smaller devices and at 400px this increases to 16px, hence that media query.

Great, thank you for the quick answer.