When viewing your site on different devices like desktop or mobile, you might see that your entire banner image is not always displayed. This is intended behavior and we have some details below on why this is the case!
Why Is My Banner Image Cropped?
Our Banner section in Site Builder is set to be responsive. This means the size and shape changes depending on the device the student is using to access it.
On larger screens like laptops, the Banner will appear wider. You will see more of the image width. On smaller devices like phones and tablets, the height may increase to create more real estate for text and buttons vertically, and the left/right sides will be cropped.
This is intentional to ensure that the content within your Banner is always visible and optimal on mobile devices. For example, if your Banner image was really wide and we tried to show the full width of the Banner on a small phone, that would mean we would need to drastically shrink the text and buttons which would be illegible for the student!
Recommendations
Because of this responsiveness, there might be specific part of the Banner image you would like to keep visible at all times. To help out with this, we have a Focal Point picker, where you can select which part of the image you'd like to be the 'focus'. So even when your site is viewed on a smaller device, you can always display that part of the Banner image.
For example, in the image below, if I want the mason jar to show on mobile devices, I can use the Focal point picker to set the focus of the image on the 'right center' option. When we first switch to the mobile view, you can see that the mason jar is not visible, and then after setting the focal point, I can switch to mobile view and have the mason jar be visible.
We also recommend using the built in heading and subheading text options instead of uploading an image with text embedded to ensure your text will be always be visible on any device it is being viewed on.