How Do I Adjust The Banner Block for Mobile Users?

How to Upload Mobile Images to a Banner Block in PhotoBiz

Overview

The Banner Block lets you create image-based sections on your website with optional text, buttons, and links. Since desktop screens and mobile phones use different shapes and sizes, the same banner image may not display the same way on every device.

PhotoBiz allows you to upload mobile-specific images for Banner Blocks. This gives you more control over how your banners appear for phone visitors, especially when using vertical images or designs that may crop differently on smaller screens.

In this guide, you will learn how to upload mobile images to a Banner Block and adjust how your banner displays on mobile devices.

STEP ONE

Log into your PhotoBiz account and click WEBSITE in the left-side menu.

This opens your Website Builder.

STEP TWO

Click the page that contains the Banner Block you want to update.

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.

Mobile users typically view websites in a vertical, portrait orientation. For best results, use images that are 1080 x 1920 pixels or a similar 9:16 aspect ratio.

If your desktop banner uses a wide image, such as 3000 x 1730 pixels, create a separate mobile version instead of simply resizing the desktop image. A mobile banner should usually use a vertical crop with the main subject centered. Avoid placing important details, faces, logos, or text near the edges of the image, since banners may crop differently depending on the phone size and selected layout.

After uploading your mobile images, thumbnails will appear in the Mobile Images section. These images will automatically display on mobile devices instead of the desktop banner images.

STEP FOUR (Optional)

Click any mobile image thumbnail to customize its content.

You can add:

• Title
• Subtitle
• Alt Text
• Link to another page
• Button text and link

You can also adjust:

• Text alignment: left, center, or right
• Vertical positioning: top, center, or bottom
• Image alignment: left, center, or right

These settings allow you to control how each mobile banner image and its content appear 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

View your website on a mobile device or use the mobile preview in your control panel to confirm your banner displays correctly.

Your mobile images will now appear for phone visitors, while your desktop images will continue to display on larger screens.

Additional Options and Helpful Notes

Mobile images are especially helpful when your desktop banner images are wide or horizontal. A separate mobile image gives you more control over how your content appears on smaller screens.

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

For best results:

• Use vertical images for mobile banners, such as 1080 x 1920 pixels or a similar 9:16 aspect ratio
• Create a separate mobile version instead of resizing a wide desktop banner image
• Keep important subjects near the center to help prevent unwanted cropping
• Avoid placing important text directly inside the image
• Use the Banner Block title and caption fields for text whenever possible
• Preview your site on both desktop and mobile after saving

Important

The Images section for desktop and the Mobile Images section are separate.

• Desktop slideshow = images in the Images section
• Mobile slideshow = images in the Mobile Images section

If mobile images are added, they will override the desktop images on phones. This is the most common reason banners may appear different between desktop and mobile.

The control panel preview shows desktop images by default. To review your mobile images, switch to mobile preview or view the website on a phone.

Layout selection also affects how your images display:

• Classic layouts may crop images to fill the available space
• No Crop layouts display the full image with spacing as needed
• Carousel layouts work well when displaying multiple banner images

The Save Changes button automatically applies updates to your website. There is no separate publish button.

Previous Post Next Post

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