Is it possible to fully customize the size of mobile views?

JessicaE

I'm learning how to create a mobile-friendly version of my course and the default Lectora sizes (1009x662 for tablet and 785x450 for smartphone) are not quite right for our LMS' mobile app player. Their helpdesk suggested I try some different sizes, but at least in Lectora Online where I have the course built, the width appears to be locked (the field is greyed out), I can only change the height. Does anyone know why this is, and if there's a way to override it?

Nicholas_Maharaj

Hello Jessica,

Yes In Lectora Online you may Insert an HTML Extension (CSS) on the top level of your project, within your Extension you would write your exceptions...

[some examples]

@media screen and (max-width: 420px) {

body {

width: 100%;

}

}

@media (orientation: landscape) and (min-width: 1080px) {

  body {

width: 100%;

}

}

https://web.dev/responsive-web-design-basics/

JessicaE

Oh cool I will try this code out, thank you for that and the reference article!

wheels

What is the use case here? The width should expand / scale to fit the device. Are you finding that content is not fitting in the window height when it scales and then the user has to scroll?

If you want all the content to be visible in the mobile device view we do have an option for that:

When you enable this publish option all pages are scaled and none will scroll. This can be a problem if you have some tall pages where you want to enable scrolling. In those cases, for tall pages you can add a script to disable the scaling. This is specifically for Lectora Online but for Desktop something similar can be done.

triv$('#wndPage',getDisplayDocument()).css('transform','');

JessicaE

My issue seems to be specific to our LMS (Docebo) mobile player in their Go.Learn app. They have a course player bar that cannot be disabled and takes up screenspace that the course believes it should have, which I think is what causes the scroll. I initially had that exact boxed checked and it not only did not prevent scrolling up/down, but there was unpredictable left/right behavior as well, where the course would get "stuck" on one side or the other. This also happened on iPad.

Unchecking the box actually fixed the width issue, but the vertical scroll is still there. I tried other page sizes to see if I could get the proportion of the available screen space right, but anything I did actually seemed to make the scrolling worse. I wasn't able to do Docebo's recommended sizing because Lectora wasn't allowing me to change the default width (hence my original question), so I did an equivalent proportion, but again nothing improved. My final result after retuning to the default sizing and leaving the scaling box unchecked is this:

Again, this is the same for the iPad. So the issue seems to be the course player itself, which I have no control over. I've submitted to Docebo's community a proposal to fix this in a future version, because this is pretty undesirable behavior from their player.

wheels

Many Lectora authors will disable all the responsive views except for phone portrait.

Then you would be able to set the page size on the desktop view and things may scale appropriately for everything except phone portrait.

The desktop view is usually sufficient for all device views (minus phone portrait) and it will scale appropriately. This also makes responsive course development much easier.

JessicaE

Interesting, I don't know that phone portrait would have worked well for this particular course's content but that's something to consider for future projects I build.

Before I'd built the mobile version of this course I had just the desktop view with the RCD option checked so it would scale to the user's device, and it would just shrink the desktop version (which I'd built to small HD size, 1280x720 rather than Lectora's default, not the best idea in retrospect). This worked okay on iPad but on the phone the text was so small you could barely read it, and the navigation buttons were also too small to use comfortably.

So is it just a matter of building the desktop version with slightly larger text and elements so it would scale well even to mobile size? Docebo's recommended desktop size is 1024x768 rather than Lectora's default 1099x662.

wheels

You could rework the desktop version as you suggest, that's one way.

Another thing you might be able to do is to decrease the page height and lock it in the phone and mobile landscape view. If I am thinking correctly that you want to avoid the black line from the Docebo player.

JessicaE

I had already locked the height to Lectora's default sizes, at least for the mobile smartphone view I could try reducing it from 450 to 400 so see if that would fix the scrolling there. Worth a try anyway!

JessicaE

Unfortunately, locking the height at 400px did not fix the scrolling at all. I really think this is because of Docebo's player, so exploring the desktop view with RCD scaling plus the phone portrait view may really be my best bet going forward.