Forum Discussion

MichelleCole-3b's avatar
MichelleCole-3b
Community Member
12 days ago
Solved

Rise 360 Custom Blocks not Mobile Responsive

Hi, I am adding some custom blocks into a course and when I preview it and choose the tablet or mobile options it doesn't display the whole block. Does anyone know how I can make sure that these disp...
rise 360
  • StevenBenassi's avatar
    StevenBenassi
    11 days ago

    Hi MichelleCole-3b​!

    Sorry to hear that Custom Blocks from Rise are not displaying as expected during mobile preview!

    I can confirm this is a known limitation that we have logged as a bug in Rise 360. This bug prevents Custom Blocks from being fully responsive on smaller screens. Our team is aware of this behavior, and they're working toward making Custom Blocks fully responsive in all environments. I've linked this discussion to the bug report so we can notify you as soon as a fix is ready!

    Thank you for your patience. I'm sorry if this has been slowing you down!

PhilFoss's avatar
PhilFoss
Community Member
4 days ago

A solution is to create a theme component to display the mobile-optimized view. I have a feeling this is how Articulate will be 'fixing' this bug. But I don't consider this a bug, its the expected behavior of SVG images, videos, even Storyline. I explain in this screen recording:

https://youtu.be/Nm5Ft1olbvQ

/* hide the mobile-optimized version by default */

div[data-block-id="cmk1ok58k00pu2e75fl9tay58"] {
    max-height:1px;
    overflow:hidden;
}

/* setting a height of 1px (instead of display:none) avoids the progress tracker issue */


/* show the mobile-optimized version, and hide the larger device version (by block id) */
@media (max-width: 479.98px) {
   
   div[data-block-id="cmk1ok58k00pu2e75fl9tay58"] {
        max-height:inherit;
}
    div[data-block-id="cmk1ohp0t00en2e75kvujnp2j"] {
        max-height:1px;
        overflow:hidden;
    }

}