Picture of James Wan
Custom page-header image
by James Wan - Tuesday, 12 May 2020, 4:26 PM

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?

Picture of Oliver Foster
Re: Custom page-header image
by Oliver Foster - Tuesday, 12 May 2020, 5:34 PM

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.


Picture of Matt Leathes
Re: Custom page-header image
by Matt Leathes - Wednesday, 13 May 2020, 5:27 PM

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."

Picture of James Wan
Re: Custom page-header image
by James Wan - Wednesday, 13 May 2020, 6:32 PM

Will do. Thanks Matt.