Form Images Deep Dive

Sidebar images on forms display dynamically and automatically adjust based on screen size, zoom level, and device type. Unlike fixed images, they may crop differently than expected because they're designed to show different portions of your image at various sizes. This is normal behavior, not a display error.

How Sidebar Images Display

Form sidebar images use dynamic display technology that automatically adjusts to fit different viewing conditions:

Screen size: The size of the device viewing the page 
Window dimensions: Browser width and height 
Zoom level: User's browser zoom setting 
Device orientation: Portrait vs landscape on tablets for example. The system automatically crops and scales your image to fill the sidebar space, which means different portions of your image may be visible depending on these factors.

Mobile display: background images and form headers

On mobile devices, form background images and header text are intentionally hidden to improve speed, readability, and focus. This behavior applies only to the large background images and header text; navigation logos remain visible.

• Mobile optimization: Large imagery and header text are removed on phones to create a cleaner, faster checkout experience.
• Display differences: These elements appear on desktop and tablet but are suppressed on mobile.
• Scope: The omission applies to form background images and the overlaid header text. Essential information should be included in other form elements that always display.
• Consistent behavior: This design is applied across all phone sizes and models.

FAQ

Q: My form image shows on desktop but not on my phone—what’s wrong?
A: The system intentionally hides background images and header text on mobile to optimize the user experience.

Q: Can I display the image on phones?
A: No. These areas are suppressed on mobile, so ensure that key information appears in text or other elements that always display.

Why Your Image Looks "Too Large" or "Cut Off"

This behavior is by design. Sidebar images are meant to: Fill the entire sidebar space without leaving empty areas Maintain their aspect ratio without stretching Adapt to any screen size automatically What you're seeing is normal - the image isn't broken or incorrectly sized. The system is showing different "crops" of your image based on the viewing conditions.

Designing Images for Dynamic Display

Best Practices for Sidebar Images

1. Use photos or flexible graphics that look good when cropped at different points 
2. Avoid text or logos unless they're small and positioned in the center 
3. Design for the "safe zone" - keep important elements in the center 50% of your image 
4. Test at different screen sizes to see how your image crops

Image Specifications

Recommended size: Images are automatically resized to fit within 1920x1200 pixels Aspect ratio: Rectangular (16:10) based on the processing dimensions

Background Position Control

In the form settings, you can adjust the background position (left, center, right) to control which part of your image is visible when it crops. This setting helps ensure the most important part of your image stays visible across different screen sizes.

For Logos or Fixed Graphics

❌ Don't use full-size logos as sidebar images - they won't display as expected 
✅ Do use small icon versions that work at various crops 
✅ Do design logos to be recognizable even when partially cropped

For Photos

✅ Perfect choice - photos naturally work well with dynamic cropping 
✅ Use images with interesting content throughout the frame 
✅ Avoid photos with important details only at the edges

Troubleshooting Common Display Issues

Q: My logo gets cut off on mobile devices 
A: Logos aren't ideal for sidebar images. Create a smaller icon version or use the logo in a different form element instead.

Q: The image looks different on desktop vs mobile 
A: This is normal behavior. The system shows different crops of your image to fit each screen size optimally.

Q: I uploaded a 1MB image but it still says "too large" 
A: "Too large" refers to how the image displays, not file size. Try using a photo instead of a graphic, or redesign your image to work well when cropped.

Q: My image displays fine on my computer but looks wrong on other devices 
A: Test your image at different browser zoom levels and window sizes to see how it will appear to other users.