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

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.

Step 2. Upload mobile banner

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

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

Step 3. Add mobile banner 

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

@media (max-width: 550px) {
    #bandeau_sup img {
        content: url("https://manager.qualifio.com/library/demo/images/example.jpg");
    }
}

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

Apply the CSS code.

Step 4. 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:

#@media (max-width: 550px) {
    #footer_sup img {
        content: url("https://manager.qualifio.com/library/demo/images/example.jpg");
    }
}

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

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.