Image display issues on desktop and mobile troubleshooting guide

Introduction

This troubleshooting guide helps you resolve image display issues on desktop and mobile devices, including images that appear too large, cropped incorrectly, or inconsistent with the recommended dimensions.

Issue description

Images may display differently across devices because of responsive layouts, aspect ratio differences, container sizing, or image settings. Even when recommended dimensions are followed, the final display can vary depending on the platform, theme, or device screen size.

Signs

• Images appear oversized on desktop or mobile
• Images are cropped at the top, bottom, or sides
• Image proportions look stretched or compressed
• The same image displays differently on different devices

Basic troubleshooting steps

Check the following common causes before making changes to your image file or layout.

• Confirm the image file uses the correct aspect ratio for the space where it appears.
• Review the image container settings, including crop, fit, and alignment options.
• Check whether desktop and mobile use different layout rules or image sizes.
• Make sure the source image has enough resolution for larger screens.
• Test the image in a private browser window or after clearing cache to rule out display issues.

Diagnostic tools and resources

• Desktop browser developer tools
• Mobile device preview mode
• Image editor for checking dimensions and aspect ratio
• [Platform or theme settings page]

Advanced troubleshooting steps

Step 1: Verify the image aspect ratio

Compare the image file dimensions with the display area. If the image is being placed in a fixed-size container, use an image with the same or similar aspect ratio to reduce cropping.

Step 2: Adjust the display settings

Review the settings for image fit, crop, focal point, and alignment. If available, choose a setting that preserves the full image on both desktop and mobile, such as fit to container or center alignment.

Step 3: Use device-specific image rules

If your platform supports separate desktop and mobile settings, upload or configure images specifically for each view. This can help prevent automatic cropping on smaller screens.

Step 4: Replace the source image if needed

If the image still appears incorrect, replace it with a version that has more padding around the subject or a safer composition. This gives responsive layouts more room to crop without losing important content.

Contact support

If the issue continues after you complete these steps, contact support and include the following details:

• The page or section where the image appears
• The image file dimensions and format
• Screenshots from desktop and mobile devices
• Any recent changes to layout, theme, or image settings

Additional resources

For related guidance, see How to Edit Images 

Conclusion

To ensure images display correctly on both desktop and mobile, focus on aspect ratio, container settings, and device-specific layout behavior. Using the right image composition and display rules will help prevent unwanted cropping and oversized images.

Important Reminders to Protect You!

In the Clubspark admin pages there are many areas where admins can upload photos to public facing web pages to help enhance and customize their tournament homepages and organization websites.

As a reminder you should have permission or a license to use any images you use in your materials and online if you are not the actual copyright holder.

Please do not download and use images you find online, in social media, or various other platforms without the permission of the photographer (or other copyright owner). But, you may think, others are downloading and sharing photos all the time so how can it be illegal? Although this may be a common occurrence, it's copyright infringement to use images you do not have rights to.

You should not take an image you sourced online and post it on your website or include it in your materials unless you have permission or a license to do so. Still have questions? Customer Service can help!