Hi, I am using the AT v0.3.0 and framework v2.2.2 I have added the following code to the custom LESS:
.headerimage1 {
.page-header {
background-image: url('../../course/en/assets/176498f4f2d35fac38248b23176696b4f030547c.png');
background-repeat: no-repeat;
background-size: cover; }
}
The course loads perfectly on desktop browsers but for some season the pages with the custom page header images do not load on mobile devices.
Any idea of what I could be doing wrong?
There is probably something different about the DOM at mobile which stops your style applying, or there is an existing style which is taking precedence and overriding yours.
You should be able to debug the course on a desktop by shrinking the window to mobile size.
Or you can debug a phone: If it's a recent Android phone it's quite easy to debug, with Chrome on the phone and Chrome on the computer and a usb cable. If it's an Apple phone you'll need a mac with iOS and Safari on the phone and Safari on the computer and also the usb cable.
Hi James
Please could you post questions like this in the Technical Discussion forum in future? This forum is for "discussing best practices for creating responsive eLearning. This includes learning design, creating art directions with impact and sharing ideas, examples and tips and tricks."