When using Impress.js, I noticed that the default slides have a large left margin (or padding - it's hard to determine with Firefox's Inspector). I have a slide with a wide <pre>
block that would fit if it were aligned to the left, but it doesn't fit on a default slide.
I've tried adjusting the CSS, but I can't seem to figure out how to make one slide (or some slides) take up the entire screen space. For reference, this is the content I'm trying to fit into a slide (and yes, Nationals fans may notice something unusual in the content - there's a reason for that):
<div class="step slide" data-x="2000" data-y="850"><pre>
NAME: Sean Burnett POS: RP AGE: 30 WT: 200 BORN: Dunedin, FL SALARY: 2350000
NAME: Tyler Clippard POS: RP AGE: 27 WT: 200 BORN: Lexington, KY SALARY: 1650000
NAME: Ross Detwiler-Smith POS: SP AGE: 26 WT: 174 BORN: St. Louis, MO SALARY: 485000
NAME: Christian Garcia POS: RP AGE: 27 WT: 215 BORN: Miami, FL SALARY: N/A
NAME: Gio Gonzalez POS: SP AGE: 27 WT: 205 BORN: Hialeah, FL SALARY: 3335000
NAME: Mike Gonzalez POS: RP AGE: 34 WT: 215 BORN: Robstown, TX SALARY: N/A
NAME: Ryan P. Mattheus POS: RP AGE: 28 WT: 215 BORN: Sacramento, CA SALARY: 481000
NAME: Craig Stammen POS: RP AGE: 28 WT: 200 BORN: Coldwater, OH SALARY: 485000
NAME: Drew Storen POS: RP AGE: 25 WT: 180 BORN: Indianapolis, IN SALARY: 498750
NAME: Jordan Q. Zimmermann POS: SP AGE: 26 WT: 218 BORN: Auburndale, WI SALARY: 2300000</pre>
</div>
This results in the text not fitting well due to the limited screen space available.
If anyone has any suggestions for CSS code that could help me make that slide utilize the full screen space in impress.js, I would greatly appreciate it. I've experimented with float: left;
and margins, but I feel like the CSS required here is beyond my current skills. Every impress demo I've seen maintains that large margin on the left side.
I've gone through various demos and example slide shows, and they all seem to accept having the left 20% of the screen as open space.