What causes text to be cut off?

If your hero image includes words embedded in the image itself, those words may:

• Appear fully on a desktop screen

• Be partially cut off on tablets

• Be completely cropped out on mobile devices

This happens most often with wide, landscape-style images that contain text near the edges.

Best Practice: Avoid Text Inside Background Images

To prevent text from being cut off on different devices:

✅ Recommended

• Use photos or background images with no text

• Let written content (headlines, taglines, buttons) be added using the website’s text fields instead

• Choose images with a clear focal point centered in the image

❌ Not Recommended

• Uploading hero images with:

  • Sermon titles

  • Taglines

  • Mission statements

  • Dates or event names

Even if the text looks correct on your screen, it may not display properly for visitors using phones or tablets.

Why SteepleMate Handles Images This Way

SteepleMate websites are built using responsive design standards, which:

• Ensure your site looks professional on all devices

• Automatically resize images for performance and readability

• Prioritize usability over fixed image layouts

Because of this, no single image crop can be guaranteed across all screen sizes.

Simple Rule of Thumb

If you don’t want it cut off, don’t bake it into the image.

Use images for atmosphere and visuals, and use the website’s text fields for anything you want visitors to read.

Need Help Choosing Images?

If you’re unsure whether an image will work well:

• Test it on desktop, tablet, and mobile views

• Choose images with wide margins and centered subjects

• Avoid placing important details near the edges

This approach ensures your church website looks great for every visitor, on every device.