Jump to content

Mobile images cropped when using parallax style

Recommended Posts

  • Replies 1
  • Views 701
  • Created
  • Last Reply

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!

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.