Can I align reveal.js slides to the top of the page?

Question

I'm using reveal.js and trying to sort out how to force my slides to the top left-most corner of the page. That seems like it should be straightforward, but when I use the Element inspector it so radically changes the page that I can't even begin to zero in on how to move the slides up to the top.

Adding this to my theme:

.reveal .slides>section,
.reveal .slides>section>section {
    padding: 0;}

Bumped it up a smidge (reveal.css has the padding set to 20px 0) but there's still white space at the top of each slide.

Answer 1

To move your slides to the top is just a configuration option of reveal.js.

Reveal.initialize({
    center: false
}

I haven't figured it out how to move them to the left though.

Horizontal alignment can be done from CSS:

.reveal .slides { margin: 0; }

Answer 2

You can used fixed positioning if you want the slides to stay in the same place as you scroll. But if you want them to stay at the top you need to use absolute positioning.

.slides {
    position: absolute;
    top: 0;
    left: 0;
}

This will set the div at the 0th pixel from the top and the 0th pixel from the left. Obviously, if you want some separation you can change these numbers.

Answer 3

A little difficult to figure out without some code to work with but this comes to mind. Hope it helps. Ans correct me if I'm going the wrong way

var d = document.getElementById('slides');
   d.style.position = "absolute";
   d.style.left = "230px";
   d.style.top = "207px";

EDITED FIDDLE

This puts it on the top-left, however, after the screen decreases a certain size, it does shift. But it seems like it's affected by the JSFiddle responsiveness. You may be able to control this with @media (min-width: ###px) But it doesn't change when the screen increases size.

Hope it helped

p.s. the coordinates are absolute placed to jsfiddle window, this may need adjustment when used in real application

Answer 4

As many people using reveal.js, I wanted to reduce the vertical blank space at top of each slides.

The problem, a css style is injected from reveal.js script so using directly css to solve this issue will be a fail as the script will provide these default values.

Indeed for each section tag the script compute and inject the css attribute top. This is done at line 1761 version 3.4.1 .

slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px';

So you have to change the calculus for your expected results. To be at the top most:

slide.style.top = 0;

To reduce the size increase the divisor value (default 2), here i use 3:

slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 3, 0 ) + 'px';

Good luck

Answer 5

I think you can get the slide as far up the page as you want with the CSS below. -5% isn't all the way to the top, but you can use a bigger number if you want it closer.

.reveal p:first-child { margin-top: 0px; }
.reveal .slides > section { padding: 0px; }
.reveal div.slides { position: absolute; top: -5%; }