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.

Osteology

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; }

Gormandize

+1 — For horizontal alignment, all the usual suspects apply: text-align, margin: 0 auto, position: absolute; left: 50%; margin-left: -[halfWidth]px... – Platinic

I managed to move the content to the left by adding .reveal .slides { margin: 0; } to the template. – Gormandize

I had to do the 0 margin, too, but that seems to do it. – Osteology

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.

Monolatry

That doesn't seem to do it, unfortunately. Nothing shows up. Simple demo at jsfiddle.net/x2neT/1 – Osteology

Reveal.js is affecting your section code... not sure where. I'd have to read into the source code. I can't adjust the height width, or anything for the sections. Only the colors. This is why hand-coding these kind of animations can be more useful. At the end of the day, you know what is written and what is affecting what. If you are dead-set on using reveal.js, github.com/hakimel/reveal.js/blob/master/css/reveal.css you will have to change the styles. – Monolatry

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

Irrefutable

That doesn't seem to do it, unfortunately. – Osteology

ok, I was throwing a stone in the dark without seeing any code. Can you provide a fiddle? – Irrefutable

jsfiddle.net/x2neT/1 shows the problem; jsfiddle.net/x2neT/3 shows how it breaks with your CSS (or with tywalkers, sadly.) – Osteology

I'm updating my answer – Irrefutable

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

Acetyl

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%; }

Advisory