StoryLine 2 HTML5 output - Small line display after previous icon?

In the HTML5 output version a small line appears after the previous button depending on the size of the browser. See image in attachments.

Here is the code in story_html5.html

<div id="control-previous" class="controlbar-button right" style="display: block;"><a class="icon previous-slide"></a></div>

I would like to remove this small line that does not appear in the flash version. Has anyone ever done a fx in css to solve this problem?

Thanks a lot

previousBtn.png

2 Replies

Mylene Ares
Author

over 5 years ago11/25/16 at 5:47 pm (UTC)

I finally found the solution. All buttons are part of the same image. The small line was actually the beginning of the next icon. I only reduced the icon width by 2px in the css.

Here is the css rule to add in player.css

.controlbar-button .icon.previous-slide
{
 width:15px;
}

Leslie McKerchie
Staff

over 5 years ago11/28/16 at 5:42 pm (UTC)

Hi Mylene and welcome to E-Learning Heroes!

Glad that you were able to get this sorted and thanks for popping back in to share the update and solution with the community.