Width Factor Greater than 5

[neilb]

Would appreciate a greater range on width factor for containers to accommodate more layouts.

[AJVancattenburch]

Hello @neilb!

Although the following suggestion may not be an absolute solution for you (or it just may!), here are steps for one method you could use:

1. Duplicate your current app which for this example we'll call it 'my-app'.

2. Name your duplicate app something like 'my-app-tablet'.

3. Have a ternary condition for a media query on screen sizes when the following possible event actions occur that would land the end-user onto the page for 'my-app':

   • Event action: When the page loads

     • Logic:

       1. Have a query that fires automatically which redirects the end-user to '/my-app-tablet' that checks the screen size (let's say you want to break at screens <= 1024px and > 500px) that only fires when {{ window.viewport <= 1024 && window.viewport > 500 }}
       2. Open two windows for creating your tablet friendly app. One to test the view by viewing your app on preview mode and pressing ⌥ + ⌘ + i (for mac) or Ctrl + Shift + i (for Windows) to open your developer tools and pressing the 'Toggle Device Toolbar' button.

       Live preview mode for testing:
       

       
       • As you make changes in your editor view, frequently refresh your window with your live preview to see what your changes look like.

   -- OR --

   • Event action: When redirecting user to another page
   • Logic:
     1. Much easier -- simply have two events attached to the circumstance that fires this event action. One for redirecting to '/my-app' that runs when {{ window.viewport > 1024 || window.viewport <= 500 }}, and the other for redirecting to '/my-app-tablet' which only fires when {{ window.viewport <= 1024 && window.viewport > 500 }}.