Mobile images cropped when using parallax style

Site URL: https://quillfish-toucan-h4me.squarespace.com/

What css can we add to our website to adjust the positioning of images when the site is being viewed on a mobile device? The images are appearing fine on desktop, however on mobile view they are extremely cropped from the top and don't show the main part of the images. 

Hello there,

You will need to change the focal point of the image to position the top of the image lower. However this will effect the desktop layout as well. Simple CSS codes that won't interfere with the parallax scrolling feature will only be able to effectively reposition the image to the left or right of the mobile screen.

You can add the image to your website using an Image Block to maintain the aspect-ratio on mobile devices. You can use CSS to adjust the height and width of the block to replicate a banner image.

Inserting the image using a Code Block will allow you full control over the image and positioning on desktop and mobile devices but will require some knowledge of both HTML and CSS.

Depending on your template and Squarespace version, you may be able to add the image directly to the background of the page using Custom CSS. You can then adjust the "background" to the desired height and more precise mobile positioning. You can replicate the parallax scrolling effect using this method as well.

There are solutions for repositioning the banner but your website is set to private and I can not see the banner image in question. If you'd like to share an updated page url and password we could better assist you.

Hope this helps!