Forum Discussion

mayur's avatar
mayur
Community Member
3 months 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 p...
advice
Articulate 360
articulate 360 teams
mayurbendre2014's avatar
mayurbendre2014
Community Member
3 months ago

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.

  • SamHill's avatar
    SamHill
    Super Hero
    3 months ago

    If you are able to share your file with me privately using review360 (invite sam.hill@rebusmedia.com) I can take a look for you.

    • mayurbendre2014's avatar
      mayurbendre2014
      Community Member
      3 months ago

      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?

      • SamHill's avatar
        SamHill
        Super Hero
        3 months ago

        Hi mayur try this out instead. Again, just paste these classes in just before the closing </head> tag in the HTML page. I've only add the !important declaration to padding-bottom as that style is added by script directly to the node, and so we need to override it with the !important declaration, otherwise, the rest should be ok as they are declared after the CSS is loaded and so should override the existing styles.

        BUG There is a bug, but likely not to be seen by users, as you'd need a screen size larger than ~1700px to see it. The green background continues to grow beyond the maximum height of the embedded Storyline file.

        .blocks-storyline__item
{
    display: flex;
    height: 100vh;
    padding-bottom: unset !important;
}
.blocks-storyline__item__iframe {
    height: auto;
    max-height: calc(100vh - 20px);
    aspect-ratio: 1 / 2;
}

         

Related Content