2

Impress.js seems to default to slides with a huge left margin (or padding -- I can't quite get Firefox's Inspector to tell me clearly). I have a slide with a pretty wide <pre> block that would fit if it was actually left aligned, but won't fit on a default slide.

I've played with the CSS and I can't seem to figure out how to get one slide (or some slides) to take up the full available screen space. FWIW, this is what I'm trying to fit (and yes: if you're a Nationals fan you'll notice something is fishy in the content. I have reasons for that.). This is my slide:

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

And I end up with this: enter image description here

The text would fit fine if I could use the full screen.

Can anyone suggest some CSS that would let me force that slide to use the full available screen space in impress.js? I tried playing with float: left; and margin widths, but the CSS here is out of my league, and I haven't seen a single impress demo that doesn't hang onto that huge margin.

I've looked at a ton of demos and example slide shows and they all seem to live with giving over the left 20% of the screen to open space.

Amanda
  • 12,099
  • 17
  • 63
  • 91

1 Answers1

0

There are a few ways to get rid of the margin. Lets start with : When you tried to set the margin.

did you also set the width of the pre element? you can try this

p {
   width: 80%;
   margin: 0 auto;
}
Majid Golshadi
  • 2,686
  • 2
  • 20
  • 29
TheRed
  • 317
  • 3
  • 12