ViewPortSize Stack

ViewPortSize Stack

displays the viewport size of your current page

Demo
Look look in the lower right corner of this page. Resize your browser window to see it in action.
The current width of the viewport is less than 400px.
The current width of the viewport is between 401 and 800px.
The current width of the viewport is between 801 and 1200px.
The current width of the viewport is between 1201 and 1600px.
The current width of the viewport is between 1601 and 3000px.

Usage

Use this stack to find out the breakpoint(s) of your theme, so you can set them in stacks that need those values like my LangMenu stack or in your custom CSS.

Need help using it on a non-stacks page? Here’s a tutorial.

Limitations
  • In some themes, the panel will not stay on top of the rest of the page content. In that case, just choose a different position on the page (there are nine of them: top/center/bottom + top/center/bottom/left/right).
  • When the ViewportSize Stack is on a page, RapidWeaver 8’s Simulate window show the viewport width and height including the 15px for the scroll bars. The stack shows the actual viewport size!
  • When the panel position includes center, the text may look a little blurry. It’s not your eyes, it’s what some browsers do.
  • Use only one copy of this stack on a page.

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

This stack requires the Stacks plugin by YourHead (version 2 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
ViewportSize HUD

Viewport size

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

© 2012-2018 Marathia Web Design | Contact