Skip to main content

How to make header/ banner image responsive for mobile and tablet

Make an eBay template header or banner image fill the screen on phones and tablets, in both the new and the classic 3Dsellers template editor.

Written by Tony Adams

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

How to make header/ banner image responsive for mobile and tablet (screenshot 1)
How to make header/ banner image responsive for mobile and tablet (screenshot 2)

Make images responsive with New templates:

After uploading an image to a content block:

  • Click the image and select the ruler button:

Make images responsive with New templates: (screenshot 3)
  • Set the Width to 100%, and

  • set the Height to auto

Make images responsive with New templates: (screenshot 4)

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.

Make header image responsive with Classic templates: (screenshot 5)
  • Then, select the multi-axis Fit button:

Make header image responsive with Classic templates: (screenshot 6)

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:

Make header image responsive with Classic templates: (screenshot 7)
Did this answer your question?