Using Mobile Images

Owen McCrudden

Created Sep 28, 2023

Using Mobile Images

25
    s

Harcourts Dashboard

6 Steps

A mobile image is sometimes used on a webpage when the desktop image doesn't look good across mobile devices. This can be particularly useful in header images that need to be in mobile dimensions. You can create a new version of the image in a mobile screen size and upload it to appear when a mobile device is detected.

1

In the website builder, select where you would like to place an image.

In the website builder, select where you would like to place an image.
2

First, put the standard image in. This will appear on computers, laptops and tablets. It will also appear on mobiles by default if a specific mobile image isn't selected.

First, put the standard image in. This will appear on computers, laptops and tablets. It will also appear on mobiles by default if a specific mobile image isn't selected.
3

For this example, we will add a photo of a chair as our regular image.

For this example, we will add a photo of a chair as our regular image.
4

Next, select Mobile Image

Next, select Mobile Image
5

For this example, let's select a photo of a man and woman shaking hands.

For this example, let's select a photo of a man and woman shaking hands.
6

To see the results, click on Preview

To see the results, click on Preview
    h

Preview

2 Steps
7

If we view the page on a desktop, the photo of the chair appears

If we view the page on a desktop, the photo of the chair appears
8

However - if we view on mobile, we will see the photo of the man and woman shaking hands

However - if we view on mobile, we will see the photo of the man and woman shaking hands
Well done!
Create how-to guides like this in a snap. Get Tango now.