Student app renders page differently - why?

Jump to solution
Community Contributor

I'm creating an infographic-style page in Canvas and the iOS student app appears to be rendering it differently to browsers (both desktop and mobile browsers). 




App screenshot

Why is there whitespace at the bottom of the cloud image on the app? I'm not so familiar with the Canvas student app - is this common behaviour?

[Incidentally, the page is a combination of stacked divs (with text paragraphs) and images with the colour matching the div background. All of them have 0 margins, which is why this gap is so annoying.]

Labels (1)
1 Solution
Community Contributor

Thanks for your reply  @rseilham . I've found a solution! But it's not via the theme editor.

(Incidentally, I tried adding a custom class with "margin: 0; padding: 0;" to the mobile app CSS file in the theme editor, and using it on the divs, but the margin remained.)

The solution was to set the image to "display: block;" 

What I suspect was happening is that the app adds a margin to the bottom of inline elements (or maybe inline-block elements, or maybe just images - I haven't tested that!) to account for a baseline - so changing to block display sidesteps that rendering idiosyncrasy. 

View solution in original post