Forum Discussion

mayur's avatar
mayur
Community Member
9 days ago

Storyline file not fit in rise

Hello All,

I am facing one issue in rise. so issue is, I have one interactivity storyline file which i used in rise course. in rise i add Interactive block in that I choose  storyline. so when I preview that in mobile it looks fine but when i preview in desktop then only half interactivity is displayed, instead of full. if anyone have any solution for this please share with me.

check below screenshot for desktop.


below is the for the mobile, in mobile it looks fine.

 

  • Hi there, there is nothing you can do about this issue with this file. Storyline behaves differently to Rise in terms of how it responds on different devices.

    Rise is fully responsive and adapts the content to the device size it is being viewed on, maintaining good font sizes, reorganising content (stack vertical, rather than horizontal) etc.

    Storyline is a fixed size and aspect ration and scales content to fit different device sizes. Think of it like a television, the picture grows or shrinks depending on the size of the TV.

    The content you are viewing is tall and thin (portrait) which is ideal for mobile and fits better, whereas on a desktop, where your screen is wider (landscape), the Storyline file is expanding the width to fit the available content space, but in doing so, it expands the height, below the fold of the browser.

    In order to stop this happening, the Rise Storyline block would have to restrict the height of the block to the height of the Storyline content (minus a few pixels for browser GUI etc).

    Hack/Fix

    If you'd like to have a go add adding a fix, you could add the following line of code HTML page:

    <style>
    .blocks-storyline__item__iframe
    {
         max-height: 100vh;
    }
    </style>
    <!-- insert, just before the closing head tag in the main HTML page -->
    </head>

     

  • Hello SamHill,

    thank you for your response, I tried code which you provide to me, it partially working. after adding that code storyline file is fit in desktop (landskip) but the background is still tall, i want to manage that too, 
    check below screenshots

    in below screen shot storyline file is fit but the background is still large or big.

     

     

     


    so after scrolling its look like these 
    could you please give me solution for this.

      • mayurbendre2014's avatar
        mayurbendre2014
        Community Member

        Hello SamHill,

        check this link https://360.articulate.com/review/content/b87edb7b-a69a-44ff-acf1-24a6f2c01223/review

        I tried something:
        The class blocks-storyline__item has a padding-bottom of 186.557%. When I reduce this size, it works, and the size becomes smaller. I tested it, and it works.

        However, I am unable to find this class in the main HTML file. I think it is coming from an external file, and I can't locate it. So, I added the following code to the main HTML file.

         <style>

                .blocks-storyline__item {

                padding-bottom: 78% !important;

                }

            </style>


        check here padding-bottom


        so after reducing padding its look like below:



        It is working fine, but I am not sure if it is the correct approach. Could you please check and let me know whether it is the right way or not?