How to show a different banner image on mobile in Qualifio

Sometimes you might want a different top banner to show on your Qualifio campaign for your desktop and mobile views. These are the steps that you can follow.

In Qualifio Look & Feel editor, there is an asset called “Banner”. You can use it to put an image on top of your campaign’s content, but you can’t set different images for desktop or mobile. So the reality is, it can be difficult to make one image to support mobile and desktop and have the campaign look perfect on both device types.

The easiest way to solve the above problem requires hosting your mobile banner image on Qualifio, then digging into a little bit of JavaScript and CSS code. Don’t worry – we will guide you through the whole process following the below steps. With this customisation, you will be able to use an entirely different banner image on mobile and even height settings and text content.

Disclaimer: Pay attention that for the swiper formats, the banner and footer will not show on mobile during the questions (the images to swipe). This is to avoid scrolling on mobile for a better user experience.

Step 1. Make desktop look & feel

Log in to Qualifio, select your campaign and make the look & feel of your campaign with the banner image you want to show on desktop.

Schermafbeelding_2022-03-09_om_15.21.30.png

Pro tip: In order to get the best performance and visual looking, we recommend 810 (width) * 300 (height) for desktop and 810 (width) * 500 (height) for mobile. However, there’s no image sizing that’s perfect for every screen and every image, while appearing beautiful using any type of device and browser size. That’s why we have some best practices and general recommendations for images in Qualifio. For more details please visit here.

Step 2. Upload mobile banner

Host the banner image that you want to show on mobile in Qualifio.

Go to Documents → Multimedia library → Upload
Double click on your image → Copy the URL

Pro tip: To make it fit the mobile version, you can make changes in the sizing of the original banner, and create it with the text in the centre to avoid it getting cut off on mobile. Generally speaking, keeping the subject or focus in the middle of your banner will help greatly when your participant is on a mobile device.

Step 3. Add mobile banner JavaScript

Add this code to the campaign’s JavaScript code injection (click the Look & Feel step and open the editor, then go to Advanced settings and paste this into JavaScript):

Schermafbeelding_2022-02-28_om_18.18.45.png

$('#bandeau_sup').append('<img class="bannermobile" src="https://manager.qualifio.com/library/demo/images/2022/example.jpg">');

Where you see the URL ending with “example.jpg”, change this to your own image URL.

Apply the JavaScript code.

Step 4. Add hide/show CSS

After you apply the JavaScript code, both banners are shown, which is obviously not what we want. We want to show a mobile banner on mobile and show a desktop banner on the desktop only. How to do this?

Add the following CSS style code on a new line under the CSS tab:

Schermafbeelding_2022-02-28_om_18.20.24.png

div#bandeau_sup img.bannermobile { display: none !important; }
@media (max-width: 500px) {
div#bandeau_sup img { display: none !important; }
div#bandeau_sup img.bannermobile { display: block !important; }
}

As you can see we use CSS @media and screen size 500px as a threshold screen width to differentiate mobile from desktop. You can adjust the mobile breakpoint in pixels to any values you’d like.

Apply the CSS code.

Step 5. Preview and test

Use the Look & Feel Editor’s mobile/desktop icons to preview the two different banner sections.

Schermafbeelding_2022-03-09_om_15.33.15.png

Step 6. Make it live

So far all is good. If you are satisfied with the changes, congratulations!

The last step is easy: just publish your campaign and make it live.

What if you need to show a different footer/bottom image?

If you’d like to use a custom footer (bottom image) section for mobile while maintaining a different one for desktop, then you’ll need to repeat the above steps while using the following manual customisation.

Copy and paste these into the code:

$('#footer').append('<img class="footermobile" src="https://manager.qualifio.com/library/demo/images/2022/example.jpg">');

Don’t forget to change the URL to your own.

div#footer img.footermobile { display: none !important; }
@media (max-width: 500px) {
div#footer img { display: none !important; }
div#footer img.footermobile { display: block !important; }
}

Don’t forget to apply and save it as well.

Now you have an idea of how to implement and show different image banners or footers for desktop and mobile, and you can make your campaigns better.