Reveal.js: Stretch to full browser width

Created on 19 Aug 2013 · 2Comments · Source: hakimel/reveal.js

Hi,

I am using a lot of BNF railroad diagrams in my current presentation. I need to every now and then stretch beyond the "section frame" and use some of the space.
I am not (yet) sure why the code below does not work

toArray( dom.slides.querySelectorAll( 'section > .full-width' ) ).forEach( function( element ) {
    $(element).width( $(window).width());
    $(element).offset({left:0});
} );

But when the browser height is not maximized, the full width is not used and a big portion on the right is left unused.

Does this perhaps have to do with some scaling or other dynamic behavior of the slide rendering?

Source

rparree

👍3

Most helpful comment

Unfortunately there is no easy way to break out of the defined presentation size for a specific slide, mostly due to how slides are laid out and scaled.

You could however do the reverse and set the presentation to be 100% the browser width/height, and then use padding on the slides you want to be smaller.

Reveal.initialize({
    width: '100%',
    height: '100%'
})

hakimel on 19 Aug 2013

👍12

All 2 comments

Unfortunately there is no easy way to break out of the defined presentation size for a specific slide, mostly due to how slides are laid out and scaled.

You could however do the reverse and set the presentation to be 100% the browser width/height, and then use padding on the slides you want to be smaller.

Reveal.initialize({
    width: '100%',
    height: '100%'
})

hakimel on 19 Aug 2013

👍12

@hakimel I tried what you said (100% width & height) in order to let slides enter as much text as possible.

And that did work great on my desktop presentation.
But the mobile vision gets incredibly disturbed, with huge fonts which completely overflow the screen (Android Samsung galaxy S3 default browser)

Any chances to make this solution also mobile compatible?
Thanks