Forum Discussion

DugaldKinvig's avatar
DugaldKinvig
Community Member
2 years ago

Storyline 360 files cutting off text when viewed on mobile

Hi, I'm hosting some test content I've created in storline 360 on a learndash enabled wordpress site. It's mostly working perfectly but when viewed on mobile the text is displaying oddly and the 'view full screen' button is entirley missing. I'm using the 'diplay accessible text by default' option as no text displays at all without it enabled and the SCORM is hosted in an iframe though the same thing is happeing if I host it as a lightbox or new browser page too. Any help would be greatly apreciated.

storyline 360
  • LucianaPiazza's avatar
    LucianaPiazza
    Staff
    2 years ago

    Hi Dugald,

    Thanks so much for reaching out!

    Storyline courses are supported in mobile browsers, but we can't guarantee they'll work when filtered through a 3rd party app, like WordPress.

     I have a few quick questions:

    • Are you experiencing the same issues when viewed through either Mobile Safari or Mobile Google Chrome?
    • Have you tried troubleshooting this behavior with SCORM Cloud? 

    I'd love to take a closer look at your file as well. Please feel free to share your .story file in this thread or privately in a support case.

    Looking forward to hearing from you!

  • DugaldKinvig's avatar
    DugaldKinvig
    Community Member
    2 years ago

    Hi, thanks for getting back to me!

    It seems to be pretty consistent across the browsers I've tried and definitely seems rooted in how accessible font is displaying within the text areas which seem to crop anything that falls outside of them. I actually think it might be to do with the specific font I need to use.

    Fortunately I've found a decent work around this morning so if anyone else is having the same problem here's how I've got it working in my case! (I haven’t tested it in all eventualities yet but seems to be working so far)
    I've made sure to be using 'display accessible text by default'.
    I've made every text box centre aligned on the vertical access (select 'middle' in align text).
    I've ensured there is plenty of padding in the text boxes to the top and bottom, even where this means they overlap.

    This has kept the text away from the edges of its bounding box even when it changes size slightly as a result of different viewers or browsers and has so been a good work around for mobile viewing in my case.

    Thanks again for getting back to me!

  • DugaldKinvig's avatar
    DugaldKinvig
    Community Member
    2 years ago

    Note: This hasn't brought back the view full screen button but I think thats maybe a lost cause here and its not essential for my project.

  • LucianaPiazza's avatar
    LucianaPiazza
    Staff
    2 years ago

    Hello Dugald, 

    Sure thing, happy to help! 

    Out of curiosity, what font are you currently using? Perhaps if others have used this font, they can share what they have done in this scenario!

    Thanks so much for sharing your workaround in this thread. I know it will be helpful to others that come across this post in the future. 

    Have a great afternoon! 

Related Content