Storyline 360 - Story Size

Storyline 360


Currently we are using a story size setup of 1334 x 750 (at our LMS consultant's recommendation).

Is it possible for an edge to edge screen experience in Storyline when using the modern player style similar to Rise?  We ask this as there 'appears' quite a large border block at left and right of screen.  This is real estate that could be used for content.  

Can we lessen the borders?

Any suggestions/assistance/teachings appreciated.

Kind regards






17 Replies
Alyssa Gomez

Hi Nicole!

Storyline slides will fill the screen (as much as possible) without stretching or skewing the slide content. If you see some gray space on the left and right side of the slides, that means the browser window is wider than the slide itself. 

Instead of stretching the slide (which would skew your slide design), the Modern Player adds gray space to fill the browser window. 

Also, keep in mind that the extra gray space you see will change depending on the size of the screen you use to view the course. 

Let me know if you have other questions about that!

Nicole Ralph

Hi Daniel,

The 'close menu.png' attachment reflects my question.  I'm wondering if edge to edge is possible similar to the 'Australian towards zero.png' example I've attached.

We are using  a story size setup of 1334 x 750 (at our LMS consultant's recommendation).  Perhaps this recommendation is holding us back ?

Thank you very much...

Alyssa Gomez

Hi Nicole!

It looks like you're viewing the content in Storyline Preview. Have you tried publishing the content and hosting it on a web server or LMS? 

If the dimensions of the slide are different than the dimensions of the browser window, you'll see some extra player space around the slide. Because each learner's screen size is different, your best bet is to pick a slide size that would fit most widescreen monitors. 

Ephraim Ross

Hi Alyssa, I have the same question as Nicole, and I don't think it's been fully answered here. I am viewing my content natively in the web browser, and at best there is a white border around each slide on all slides. Now, it's not a huge border, but it definitely breaks the 'edge-to-edge' look that I would like to design for.

Because these designs are responsive, I understand that in many cases users will not actually experience the course in exactly the format I desire. But the issue here isn't that it's only sometimes edge-to-edge, but rather that it's never edge-to-edge.

I'll illustrate what I'm describing here. It looks like somewhere in the CSS a margin of 15px is added to all sides of the:

<div class="area-primary cs-area-primary" data-reactid=".0.0.5">

I'll show you what I mean:

Always padding.

Does anyone know of a way to allow for truly edge-to-edge content? Hopefully without needing to dig too deep into the CSS and creating a separate style to modify the Storyline output.



Nicole Ralph

Good morning.

After discussion with our LMS team, an edge to edge experience is available if we customize our LMS platform and/or open the scorm content in a new browser tab.

The other option is to establish browser settings via Storyline.  If we choose this we need to be sure to use SVG based images - Nicole

Player_Other_settings in Storyline

Alyssa Gomez

Hi Nicole!

I used the standard slide size, which is 720 x 540. As long as the web browser window is 720 pixels wide or smaller, the slide will appear edge-to-edge in the browser.

If you use a wider slide size, like 1200 pixels, then that would allow an edge-to-edge design in a wider browser window.