Custom Hero Image (Mobile View Only) Squarespace

23 Mar

Here’s your no nonsense guide to changing your hero image (or any background image) on mobile view only.

Step 1.

Create/Find an image for mobile view.

In this case, I have found an image which displays a lot more of the night sky. This will allow the main test to display without covering the cabin.

Step 2.

Upload Your image into the Custom CSS Panel

Here, click Custom Files. You will be given a prompt to upload your own file here.

Where highlighted in the image, make sure the custom file sits between the (“ “) in the code.

Step 3.

Find the Hero image ‘Data Section’.

We need to tell the code what image we will be changing on mobile view only.

To find your section ID, the easiest way is to install this FREE Squarespace Plugin. Squarespace ID Finder.

Install here.

Here’s one I made earlier (Copy this)

Replace text highlighted in blue with the Section ID then your Custom Image.

/*new img for hero mobile view*/

@media only screen and (max-width: 600px) {

section[data-section-id="667c023370f4716e8134b78e"].section-background img{

content:url("https://static1.squarespace.com/static/665db01084ecec7c1d24ce10/t/679c940acedb29556e7af03b/1738314765353/Dark+Skies+Coety+Bach+-+Mobile+View.jpg")

}