I am using the lesson activity and pulling in embedded documents from Google Docs so we only have to edit our course materials in one place. Videos that have been embedded are displaying perfectly, but the documents are displaying wrongly on some devices.
If I look at the lesson on an Android and the mobile app, it works fine.
If I look at the lesson on my phone using Chrome and the web app, it works fine.
If I look at the lesson on my phone using the mobile app, it appears narrow (with padding to the left and top of the page).
The embedded document goes into an iframe. There is then javascript to replace that with <div class="embedded-doc"> so that the full width of the document appears (without this script the document always displays very narrow). The div is set in my main css to be 100%:
.embedded-doc {
width: 100%;
}
I have also tried to create a separate css and added it to the mobile appearance in site administration:
.embedded-doc {
width: 100%;
padding-left: 0px;
padding-top: 0px;
margin-left: 0px;
margin-top: 0px;
}
I suspect there is something I can change in the css specifically for the mobile app to get it to display full width but I cannot figure it out. When I test it by looking at my laptop and choose mobile display on inspect element it looks fine. I also looked it on my mobile through the web app but that displays ok. It is only when I look at it through the mobile app on an iphone that is a problem.
I have attached a screenshot for when I look at it on the Chrome browser and then again when I look at it on the mobile app.
I would appreciate any guidance on how to figure out where the css is adding this padding so I can change it. Thanks!
