Viewport size

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

MediaQueries Stack

MediaQueries Stack

hide content depending on the viewport width, orientation and/or resolution

The Stacks plugin provides functionality for all stacks to hide content for mobile, tablet and/or desktop (see below). Although this is often sufficient, there are situations you may want more precise control over the breakpoints (especially when you agree with me that viewport breakpoints should be based on the design, not on devices).

In those cases, the MediaQueries Stack is the solution. With this stack, you can hide content below, between or above a set viewport width, choose your own units (px, em,…), set the orientation (portrait, landscape) and define the minimum and/or maximum screen resolution.

Tip: use my ViewportSize stack to see the current viewport width (bottom left of this page).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
Demo
Below are a few examples of the MediaQueries Stack in action, hiding its content based on the viewport width, orientation and/or resolution. Change the width of your browser window to see the stack in action.

#1

I will be hidden when the viewport width is less than 768px

#2

I will be hidden when the viewport width is between 768px and 1200px

#3

I will be hidden when the viewport width is more than 768px

#4

I will always be hidden in portrait mode

#5

I will always be hidden in landscape mode

#6

I will be hidden when the viewport width is less than 768px, but only in landscape mode and when the maximum screen resolution is 1

#7

I will be hidden when the viewport width is less than 768px, but only in portrait mode and when the minimum screen resolution is 2
For examples of the advanced use of the MediaQueries Stack (with custom selectors and inline content) see demo page #1.
For examples of the use of MediaQueries Stacks to show and hide elements on different devices using the viewport width only, see demo page #2.
Limitations
  • This stack works only for screens, not for other media types.
  • The min/max resolution settings do not work in Internet Explorer (any version)

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3).
Background
For those interested, here’s an example of the code generated by this stack with all options used:
@media screen and (max-width: 768px) and (orientation: landscape) and (‑webkit‑min‑device‑pixel‑ratio: 1) and (‑webkit‑max‑device‑pixel‑ratio: 1.33), screen and (max-width: 768px) and (orientation: landscape) and (min‑resolution: 1dppx) and (max‑resolution: 1.33dppx) { #stacks_in_X_pageY { display: none !important; } }
As you can see, when setting the min/max resolution, both the WebKit specific syntax and the standard min/max resolution are used by the MediaQueries Stack. This way, almost all browsers are covered.

More info:
caniuse.com: Media Queries: resolution feature
CSS WG Blog – How to unprefix -webkit-device-pixel-ratio
MediaQueries HUD
© 2012-2018 Marathia Web Design | Contact