Use CSS to Experiment with Responsive Layouts

We’re currently working on exciting upcoming functionality that enhances the ability to build responsive layouts in iRise. In the meantime, if you’d like to start experimenting with that functionality, you can using the new custom CSS feature.

Since this isn't officially an implemented feature, the process does have a few caveats. For those interested, we've created a detailed video to fill you in.

If you'd like to experiment with the examples shown in the video, here's the CSS for reference.

Note: I've included a colon in the examples below, which allows you to cut and paste the CSS in one keystroke. If you'd like to type it in instead, the text before the colon would go in the first box and text after the colon would go in the second box.

Transparent lightbox:

  • width: 100%
  • height: 100%
  • background: rgba(0,0,0,0.7)
  • top: 0px
  • left: 0px
  • Note: This CSS makes the section full width and height, and adds a transparent background

Alert box: 

  • left: 50%
  • top: 50%
  • transform: translate(-50%,-50%)
  • Note: This CSS centers the alert box vertically and horizontally

Top right icon:

  • right: 15px
  • left: auto
  • Note: This CSS places the top right icon to always be 15 pixels from the right edge of the section it sits in.

Bottom red icon:

  • top: auto
  • bottom: 54px
  • left: auto
  • right: 10px
  • Note: This CSS places the icon to always be 54 pixels from bottom edge of the section it sits in (or of the browser edge if it's not inside a section) and 10 pixels from the right edge.

Image tiles

  • background-size: cover
  • Note: This CSS makes the background image of the section resize dynamically

Dynamic font size

  • font-size: 3vw
  • Note: This CSS will make the font size adjust to size of the section it sits in (or the browser size if the font widget is not it a section). The 3 used here means that the font size will be 3% of the section or browser size. You'll probably need to iterate a few times to get the right setting for your layout.

*Remember that CSS does not currently work with Viewstacks.