Dear Team

Under lesson settings, authoring, Windows Background has a default colour of grey. As a result this grey appears on the side or the bottom on the master template.
The page itself is responsive and the user need not see this grey box on either sides of the page or the bottom of it. Image has been attached.
Any suggestions on how to eliminate the grey layer behind the page. I dont want to add any image or colour in this grey layer.. Only the page should be resized with whatvever is there on the page.Also I noticed any images added in staging doest get resized based on the dimensions of the screen.It doesnt get responsive.So is there a way to make the image in the staging under Authoring also responsive?

Hi Sanjyot,
A couple things to think about:

1. How is this content going to be launched in the delivery platform? Is it going to be in a popup? Or housed within an IFrame? In either of those cases, the delivery platform (LMS / LRS) can and will control the size of the popup window or the IFrame. This means that there will be no grey areas, just the bounds of the popup window / IFrame. It might be worth testing it on the delivery platform first.
2. Even if #1 above doesn't resolve the issue, what you're asking for (stretching the content to exactly match the available space) will distort the shape of the entire lesson. Circles will become ovals and squares will become rectangles. Text will appear stretched or squashed. Overall, it's not a good idea, will lead to more problems, and also something that you do not see on the internet any more since Flash went away. If you go to YouTube, or any website, you'll see that if the content doesn't exactly match the aspect ratio of the available space, the remaining space is left empty (either black or white or whatever background color makes the most sense) rather than being distorted to fill the space. I would recommend changing the "window background color" to black since your content is pretty dark, and I guarantee none of your users will think twice about it!
3. Regarding a background image, it may be possible to change how that is displayed (right now it does scale, but it also tiles if necessary), but this will take time to implement. However, since you have a complicated background with lots of intricate details, getting them to line up exactly will be very difficult. You also do not see this approach on the internet very often for that same reason. A better approach is to make that area not noticable by making it a solid dark color.

Hope that helps!

Thanks..I understand stretching the image will distort the image and ruin the aspect ratio. The dimensions used are the standard aspect ratio i.e 1280/720. I do know that if the content page is smaller than the window in the background appears coloured, however in youtube when viewed on the mobile if you pinch out the middle frame it expands and fills the screen. Is this kind of possible now with Smartbuilder that if its pinched out to fill the screen. Currently I tested it out on Android and I didnt see it happening.. so is this something for the future to get developed or am I getting it wrong or do we need to change the dimensions of the page? Customer's LRS is getting developed so there is scope for it to be defined to match the size of the content page. But we are still discussing if this needs to be put on some of the common platforms where we will not have control on the dimensions of the iframe or window page. So in this case do you recommend us to change the dimension of the page? I know for sure the end viewer really dont notice but as a vendor to our customer we still need to give him the best possible experience.

Hi Sanjyot,
It's hard to say what the best approach is without the delivery environment ready yet. If the delivery environment is strict about the size it gives to the lesson, then you would want to follow that size. But learners almost always have different size screens (more or less toolbars), or resize their browser windows to all sorts of different sizes and shapes, and you'll never really be able to control that.

Check out the second half of this video, it shows the different options for scaling:
https://share.smartbuilder.com/public/support/lesson-size-and-scaling.mp4

You may be interested in the "Scale to Width" option, which will get rid of the blank space on the sides... but if the lesson needs more vertical space, it will create a scrollbar. This is similar to the "pinch to zoom" you mentioned for YouTube - the whole space is filled, but some amount on the top/bottom is cut off (in the case of the lesson, they can scroll up or down to see the rest).

Personally, for a use case like this where you don't have really tall pages, I would stay with the settings you currently have (Scale to Width & Height) and make the background dark.