CODEWITHSUNDEEP
reveal.js
fommil
fommil

Reputation: 5875

reduce empty space at the top of presentation

I'd really like to be able to decrease the amount of padding at the top of all my level 2 reveal.js slides (version 2.6.2). It doesn't appear to be possible to customise this with CSS because the offset is a negative number calculated dynamically.

e.g. in http://fommil.github.io/scalax14/#/5/1 I would like to reclaim at least 200 pixels at the top. The top parameter is currently being calculated to be -350px but I'd really rather it was closer to -500px.

Is there a way to do this with config?

Upvotes: 4

Views: 1479

Answers (1)

Lorenzo Boccaccia
Lorenzo Boccaccia

Reputation: 6131

Reveal keeps the aspect ratio of the resolution you entered in the config.

If you want your slides to have less padding, there are multiple ways:

disable centering:

 center: true, // add this in init or config

slides get positioned at the top of the page, and all the padding happens at the bottom

use a 4:3 format for your slides

width: 1024, // add this in init or config
height: 768,

this will move all padding to sides of the page (well, assuming the browser window is not resized) as long as the page ratio is wider than 4:3

create fully responsive slides:

var resizeSlide = function() {
   Reveal.configure({
     width: window.innerWidth,
     height: window.innerHeight
   });
}

setInterval(resizeSlide, 1000);

you will then need to make your slides responsive to changes in slide format, but this will make them utilize the full page for the presentation. I'm using setInterval and not onResize because onResize just don't work on mobile and some browser/os combination (i.e. chrome on windows 8.1 when using keyboard shortcut and desktop hotspots to resize the window)

Upvotes: 4

Related Questions