TOPIC:

I can't seem to find a way of vertically centering content in XOT that works for desktop and mobile views.

Here's a test of different positioning solutions: xerte.cardiff.ac.uk/play_4285. None of these work on mobile (they all position the content at the top of the screen). Also, most of these solutions require changing #x_mobileScroll, #x_pageDiv, #x_page0, #pageContents, .pageHolder to 100% height in order to work correctly on desktop.

Hi Neil

I don't know a quick solution for this but I think you'd probably need some javascript as well as css if you want a solution that works on both desktop & mobile.

On desktop the header and footer bars are fixed on screen and only the page content will scroll. On mobile, to make better use of the space, only the footer is always there and the header scrolls with the page content. These differences are made by two different stylesheets that are used depending on how the content's being viewed: modules/xerte/parent_templates/Nottingham/common_html5/css/mobileStyles.css & desktopstyles.css

I would have thought you'd need to use js to work out whether it's using the mobile or desktop css and then apply different styles depending on which it is. You might also need to use js to work out height of area you want content centered in on mobile view as I don't think 100% will work with the way the layout's done.

Fay