CODEWITHSUNDEEP
cssuser-interfaceresponsive-design
SebastianOpperman
SebastianOpperman

Reputation: 7326

What is the standard CSS container size in 2018?

When designing a responsive layout, what size is the standard for using a max-width container in 2018? Currently I am using 1140px to fit the standard screen size of 1366px.

Upvotes: 2

Views: 23472

Answers (3)

Arajay
Arajay

Reputation: 623

UPDATE 2022

here are my latest breakpoint/container recommendations based on today's global usage statistics:

$breakpoints: (
    xs: 0, 
    sm: 600px, // mobile landscape, tablet (portrait)
    md: 1024px, // chromebooks, ipad pro (portrait), tablet (landscape)
    lg: 1600px, // most laptops and desktops
    xl: 2048px // 2k and up
);

$container-max-width: (
    xs: 480px, 
    sm: 960px,
    md: 1280px, 
    lg: 1920px,
    xl: 3840px
);

PREVIOUS ANSWER

Based on usage statistics most common desktop resolutions are 1366 and 1920.

See usage stats: https://gs.statcounter.com/screen-resolution-stats

As such, I find that Bootstrap default breakpoints are too small and redefine containers as below.

$grid-breakpoints: (
    xs: 0,
    sm: 768px,
    md: 992px,
    lg: 1366px,
    xl: 1920px
);

$container-max-widths: (
    sm: 720px,
    md: 960px,
    lg: 1280px,
    xl: 1840px
);

EDIT: After further reflection these container max-widths are more proportional to the screen widths. This deviates more drastically from Bootstrap defaults, however.

$container-max-widths: (
    sm: 720px,
    md: 930px,
    lg: 1280px,
    xl: 1800px
);

Upvotes: 6

John Brand
John Brand

Reputation: 31

Here are the material breakpoints:

https://material.io/guidelines/layout/responsive-ui.html

They use a variety of columns and breakpoints:

< 480 / 4 cols / xsmall
481 - 600 / 8 cols / xsmall
601 - 840 / 8 cols / small
841 - 960 / 12 cols / small
961 - 1280 / 12 cols / medium
1281 - 1440 / 12 cols / large
1441 - 1600 / 12 cols / large
1601 - 1920 / 12 cols / large (HD desktops)
> 1920 / 12 cols / large (Retina desktops)

Adaptive breakpoints in Material Design [img]

Upvotes: 3

Tim Gerhard
Tim Gerhard

Reputation: 3607

I'd say use the bootstrap container sizes, as they are used pretty often and are quite the average below web development.

These are the sizes:

xs (for phones - screens less than 768px wide)

sm (for tablets - screens equal to or greater than 768px wide)

md (for small laptops - screens equal to or greater than 992px wide)

lg (for laptops and desktops - screens equal to or greater than 1200px wide)

So yes, I'd use 1200px as your desktop container size.

Upvotes: 11

Related Questions