Skip to main content
All CollectionsLISTING DESIGNERCustomizing & Designing Templates
How to make header/ banner image responsive for mobile and tablet
How to make header/ banner image responsive for mobile and tablet

Make your banner image full-width and adjust to screen size with Listing Designer's template editors.

Lisa Adams avatar
Written by Lisa Adams
Updated over 2 years ago

Listing Designer includes two template editors, each with a different way to set the header images size:


Make images responsive with New templates:

After uploading an image to a content block:

  • Click the image and select the ruler button:

  • Set the Width to 100%, and

  • set the Height to auto

After clicking Update, your image will adapt to any screen size.


Make header image responsive with Classic templates:

Note: this feature is currently only available for templates with large background image headers. Templates such as "Boxed" do not have the option below.

  • Hover over the large background header image to reveal the Zoom settings.

  • Then, select the multi-axis Fit button:

Pro tip: The first two Fit buttons are used for a background images that crop when the screen gets smaller.

Now, the header image will be full-width and adapt to any screen size:

Did this answer your question?