Adjust Banner Block for Mobile Users

How to Upload Mobile Images to a Banner Block in PhotoBiz

Overview

The Banner Block allows you to create large image-based sections on your PhotoBiz website with optional text, buttons, and links. Because desktop screens are wide and mobile phone screens are vertical, the same banner image may not display well on every device.

PhotoBiz allows you to add separate mobile images to a Banner Block so you have more control over what visitors see on phones. This is especially helpful when a wide desktop image crops out faces, logos, or other important details on smaller screens.

This guide walks you through uploading mobile-specific banner images, choosing a mobile banner size, and previewing the results on your website.

STEP ONE

Log in to your PhotoBiz account and click WEBSITE in the left-side menu. This opens the Website Builder, where you can manage your website pages and blocks.

STEP TWO

Click the page that contains the Banner Block you want to update. This opens the page editor so you can view and edit the blocks on that page.

STEP THREE

Click the BANNER BLOCK you want to edit and locate the MOBILE IMAGES section.

Upload an image from your computer, insert an image from the Clipboard, or select an image from the Stock Image Library.

For best results, use a portrait-oriented image for your mobile banner. 1080 × 1920 pixels, or another image with a similar 9:16 portrait ratio, is a good starting point. This is a recommendation rather than a required image size.

STEP FOUR

After your image uploads, confirm that its thumbnail appears in the MOBILE IMAGES section. Images added here are used for the mobile version of the Banner Block and remain separate from the images in the desktop IMAGES section.

If you add more than one mobile image, the Banner Block can display those images as a slideshow on mobile devices.

STEP FIVE

Open the Banner Block layout settings and choose the layout and mobile banner size you want to use.

The Classic, Carousel, No Crop, and Modern Carousel layouts include mobile size options such as Full Screen, Medium, Short, and Thin. The selected layout and mobile size can affect how much of your image is visible on a phone.

Click SAVE CHANGES when you are finished. Saving applies your changes to your website. There is no separate publish step.

FINAL STEP

Use the mobile preview option in your Website Builder or open your live website on a phone.

Check that the main subject, text, and other important details display correctly. Your mobile image will display for phone visitors, while the images in the desktop IMAGES section will continue to display on larger screens.

Different phone screen sizes can display the banner slightly differently, so review important content carefully before you finish.

Customize Your Mobile Banner Content

Click a thumbnail in the MOBILE IMAGES section to customize the content associated with that mobile banner image.

Depending on your Banner Block layout, you can customize options such as:

Title
Subtitle
Alt text
Link
Button text
Button link
Text alignment
Vertical positioning
Image alignment

These settings allow you to fine-tune how the individual mobile banner image and its content appear on a phone.

Mobile Banner Image Best Practices

A separate mobile image gives you more control over how your banner appears on smaller, vertically oriented screens.

For best results:

Use a portrait-oriented image, such as 1080 × 1920 pixels or a similar 9:16 ratio.
Treat 1080 × 1920 as a recommended starting point rather than a required size.
Keep faces, logos, and other important subjects near the center of the image.
Avoid placing critical details close to the outer edges.
Create a separate mobile version rather than simply resizing a wide desktop image when possible.
Avoid placing important text directly inside the image.
Use the Banner Block title, subtitle, and button settings for text whenever possible.
Add descriptive alt text when an image provides meaningful visual information.
Preview your Banner Block on both desktop and mobile after making changes.

A 9:16 image does not guarantee that the entire image will appear on every phone. The Banner Block layout, mobile banner size, image alignment, and the visitor's screen dimensions can all affect cropping.

Important Notes About Desktop and Mobile Images

The IMAGES and MOBILE IMAGES sections control different versions of your Banner Block.

IMAGES controls the banner images used on desktop and larger screens.
MOBILE IMAGES controls the images specifically used on phones.
Adding a mobile image does not replace or edit the corresponding desktop image.
If you add multiple mobile images, they can display as a mobile slideshow.
If you do not add separate mobile images, the Banner Block can use your desktop banner images on mobile.

Adding mobile images is optional, but it is recommended when your desktop images do not crop well on phone screens.

Banner Layout Notes

Your selected Banner Block layout affects how your desktop and mobile images display.

Classic layouts can crop images to fill the available banner area.
Carousel layouts are useful when displaying multiple banner images.
No Crop layouts prioritize showing the full image rather than filling the entire banner area.
Modern Carousel provides another slideshow-style layout for displaying multiple images.

If a mobile image is cropping more than you want, try adjusting its image alignment or changing the mobile banner size. You can also try a No Crop layout when displaying the entire image is more important than filling the banner area.

Troubleshooting & FAQs

Do I have to upload a separate mobile image?

No. Mobile-specific images are optional. If you do not add images to the MOBILE IMAGES section, your Banner Block can use the desktop banner images on mobile devices.

Adding separate mobile images is helpful when your desktop images are too wide or do not crop well on a vertical phone screen.

Why does my banner look good on desktop but not on mobile?

Desktop screens and phone screens have very different dimensions. A wide landscape banner may need significant cropping to fill a vertical mobile banner area.

Upload a separate portrait-oriented image to the MOBILE IMAGES section for greater control over what mobile visitors see.

Why is my 1080 × 1920 mobile image still being cropped?

A 1080 × 1920 image uses a recommended 9:16 portrait ratio, but the exact visible area can still vary.

The Banner Block layout, mobile size, image alignment, and the visitor's phone dimensions can affect cropping. Try adjusting the image alignment or mobile banner size. You can also try a No Crop layout if displaying the entire image is more important.

Why is my mobile image cutting off faces or important details?

Keep the main subject toward the center of the image and avoid placing important details near the outer edges.

You can also adjust the image alignment or try a different mobile banner size.

Why is my desktop banner image still showing on mobile?

Confirm that your image appears in the MOBILE IMAGES section and that your changes were saved.

Then use the mobile preview or open the live website on a phone to check the Banner Block again.

Why won't my mobile image upload?

Check the image file size.

The standard PhotoBiz Website Package supports image uploads up to 4 MB. Accounts with the Original Files upgrade can upload files up to 50 MB.

If your image exceeds the limit available on your account, reduce the image file size before uploading it.

Why is the text on my mobile banner difficult to read?

Avoid adding important text directly to the image whenever possible.

Instead, use the Banner Block title, subtitle, and button fields. This gives PhotoBiz more flexibility to display your text across different screen sizes and also keeps the text accessible to website visitors.

Need Help?

Support Hours: Monday to Friday, 9am to 6pm EST

Phone: 866.463.7620

Support Channels: Phone, Live Chat, Support Ticket

Previous Post Next Post

How To Link Banners

May 27, 2025

How To Use Banner Blocks

July 21, 2026

How To Add Text To Banners