3

Say one has the following impress.js code:

<div id="title" class="step" data-x="0" data-y="0" data-scale="5">
Foo
</div>
<div id="toc" class="step" data-x="10000" data-y="0" data-scale="1">
bar
</div>

This renders fine on a 1920x1080 screen, because 5 (data-scale) times 2000 (screen width with some buffer) is 10000.

But:

  • It doesn't render nice on smaller screens (because 1920 is large compared to for instance 800); and
  • For larger screens, the slides can still overlap.

How can one set the slide location, based on the viewport size? Thus something like 500vw? (tried that, but that didn't work).

Willem Van Onsem
  • 443,496
  • 30
  • 428
  • 555

0 Answers0