Marathia’s Stacks

stacks for the rest of us

stacks for the rest of us

Viewport size

width: Resize to find out!px
height: Resize to find out!px

Stacks Image 91039

MediaQueries Stack demo #2

demo #1 | demo #2 | back to the product page

Settings for different devices

On this page, MediaQueries Stacks are used to show and hide elements on different devices using the viewport width only. As said on the product page, I agree with those who state that the breakpoints should be based on the design, not devices. There are circumstances however where targeting devices is desirable. In those cases, the MediaQueries Stack got you covered too.

There are many opinions on what the ideal breakpoints are, but the ones used here are based on an article by David Gilbertson on freeCodeCamp.
Resize your window to see the stack in action!
Your current screen width is less than 399pxbetween 400-599pxbetween 600-899pxbetween 900-1199pxbetween 1200-1799pxmore than 1800px which is typical for a smartphone in portrait modesmartphone in landscape modetablet in portrait modetablet in portrait modedesktopbig desktop.
smartphone portrait: max. 399px
smartphone portrait: max. 399px
smartphone landscape: 400-599px
smartphone landscape: 400-599px
tablet portrait: 600-899px
tablet portrait: 600-899px
tablet landscape: 900-1199px
tablet landscape: 900-1199px
desktop: 1200-1799px
desktop: 1200-1799px
big desktop: min. 1800px
big desktop: min. 1800px

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…