Forum Discussion

JessicaDobbs-36's avatar
JessicaDobbs-36
Community Member
3 years ago

Web Page Responsiveness as a Web Object

Hi all! I have a responsive web page that I've embedded into a Storyline 360 course as a web object. Unfortunately, the web page loses it's responsiveness as a web object making it a particularly poor experience on mobile.

Has anyone found a solution or workaround to keep web page responsiveness when embedding as a web object?

  • add this small javascript on the slide with your web object


    if( window.cssPatchWebObject !== "done") {
    style = document.createElement('style');
    style.textContent = `
    .webobject {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    };`

    document.body.appendChild(style);
    window.cssPatchWebObject = "done";
    }

    but you cannot change the fixed aspect ratio of the slides

    result
    https://360.articulate.com/review/content/0aed99ad-6845-4ced-8d78-c539db191b7b/review

     

     

    • TSUIT's avatar
      TSUIT
      Community Member
      Jürgen Schoenemeyer

      but you cannot change the fixed aspect ratio of the slides

       

      is there anyway if we could change the ratio of the slides by javascript when the page is being rescale now?

  • my Javascript/css patch is no longer necessary - the function is now implemented direct in storyline (3.78, ...)

    deactivate "Scale with slide"

    • JackBranum-0d94's avatar
      JackBranum-0d94
      Community Member

      Jurgen, many thanks for the follow up.

      Jack P. Branum
      Founder & Principal Creative
      Bluegrass Learning Solutions
      859.472.4292
      bluegrasslearningsolutions.com

  • Glad that Jürgen was able to help you, Jack! Thanks so much, Jürgen! 👏

    I just wanted to add a quick note: it looks like your signature came through when you replied via email. You can remove it by clicking ‘Edit’ below your response. Here’s a quick Peek 360 video if you need help.

    Have a great day!