Adjust Banner Block for Mobile Users

How to Upload Mobile Images to a Banner Block in PhotoBiz

Overview

The Banner Block allows you to add large image-based sections to 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.

If you upload a wide landscape image for your desktop banner, it may crop awkwardly on a phone. Important details, faces, logos, or text may be cut off. PhotoBiz allows you to upload separate mobile images for Banner Blocks so you can control how your banner looks for visitors using phones.

This guide walks you through how to upload mobile-specific images to a Banner Block and preview the result on mobile.

STEP ONE

This opens your 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 to open its settings.

Locate the Mobile Images section. This is where you can upload images that will display specifically for visitors viewing your website on a phone.

You can upload images from your computer, insert images from the Clipboard, or select images from the Stock Image Library.

For best results, use a vertical image for your mobile banner. A good recommended size is 1080 x 1920 pixels, or a similar 9:16 portrait ratio.

After uploading your mobile image, a thumbnail will appear in the Mobile Images section. Once saved, this image will display on phones instead of the desktop banner image.

STEP FOUR (Optional)

Click any mobile image thumbnail if you want to customize the content for that mobile banner image.

You can add a title, subtitle, alt text, link, button text, and button link. You can also adjust the text alignment, vertical positioning, and image alignment for the mobile banner image.

These settings help control how your mobile banner content appears on phone screens.

STEP FIVE

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

Each banner type includes mobile size options:

Classic: Full Screen, Medium, Short, Thin
Carousel: Full Screen, Medium, Short, Thin
No Crop: Full Screen, Medium, Short, Thin
Modern Carousel: Full Screen, Medium, Short, Thin

Choose the layout that works best for your mobile images, then click Save Changes.

FINAL STEP

Preview your website on a phone or use the mobile preview option in your control panel.

Your mobile image should now display for phone visitors, while your desktop banner image will continue to display on larger screens. Review the mobile version carefully to make sure the main subject, text, and important details appear correctly.

Mobile Banner Image Best Practices

Mobile images are especially helpful when your desktop banner uses a wide or landscape image. A separate mobile image gives you better control over how the banner appears on smaller vertical screens.

For best results:

Use vertical images for mobile banners, such as 1080 x 1920 pixels or a similar 9:16 ratio
Create a separate mobile version instead of resizing a wide desktop image
Keep the main subject near the center of the image
Avoid placing faces, logos, or important details near the edges
Avoid putting important text directly inside the image
Use the Banner Block title, subtitle, and button fields for text whenever possible
Preview your site on both desktop and mobile after saving

Important Notes About Desktop and Mobile Images

The Images section and the Mobile Images section are separate.

The Images section controls the desktop banner slideshow.
The Mobile Images section controls the mobile banner slideshow.

If mobile images are added, they will override the desktop banner images on phones. This is the most common reason a Banner Block may look different on desktop and mobile.

If you add multiple images to the Mobile Images section, they will display as a slideshow on mobile devices.

Layout Notes

Your selected Banner Block layout can affect how images display.

Classic layouts may crop images to fill the available banner area.
No Crop layouts display the full image with spacing as needed.
Carousel layouts work well when you want to display multiple banner images.
Modern Carousel layouts provide another slideshow-style option for multiple banner images.

If your mobile banner is cropping too much, try adjusting the mobile image crop, image alignment, or mobile size option. You can also try a No Crop layout if showing the full image is more important than filling the full banner area.

Troubleshooting & FAQs

My banner looks good on desktop but bad on mobile.

Upload a separate image in the Mobile Images section. Desktop images are usually wide, while phone screens are vertical. A mobile-specific image gives you better control over what phone visitors see.

My mobile image is cutting off faces or important details.

Use a vertical image with the main subject centered. Avoid placing important content near the edges because different phone sizes may crop the banner differently.

My desktop image is still showing on mobile.

Confirm that your mobile image was uploaded to the Mobile Images section and that you clicked Save Changes. Then preview the website using mobile preview or view the live site on a phone.

My mobile banner has text that is hard to read.

Avoid placing text directly inside the image. Instead, use the Banner Block title, subtitle, and button fields so the text can display more reliably across different screen sizes.

How To Link Banners

May 27, 2025

How To Use Banner Blocks

May 26, 2026

How To Add Text To Banners

May 27, 2025

How To Change The Fonts On Banners

December 9, 2025

How Do I Adjust The Banner Block for Mobile Users?