Edit the Banner Image on Mobile
What does this code do?
These code snippets will allow you to make changes to a banner or background image when viewed from a mobile device.
Squarespace does not make it easy to edit the banner image when viewed from a mobile device. There are several options to help you make the banner section more mobile friendly. I recommend one of the first three.
Option 1: Change the Background to a Different Image on Mobile
Copy and paste this code into Custom CSS.
Squarespace 7.0
@media only screen and (max-width: 640px) { #PAGEID img { display: none; } #PAGEID .sqs-block-image img { display: block; } #PAGEID { background: url('IMAGEURL'); background-repeat: no-repeat; background-size: 100%; } }
Squarespace 7.1
@media only screen and (max-width: 640px) {
#COLLECTIONID {
#page .page-section:nth-of-type(1) {
img {
display: none !important;
}
.sqs-block-image img {
display: block;
}
.section-background {
background: url("IMAGEURL");
background-repeat: no-repeat;
background-size: 100%;
}
}
}
}
If you have an effect on your background image, use this code instead.
@media only screen and (max-width: 640px) {
#COLLECTIONID {
#page .page-section:nth-of-type(1) {
img, .section-background-canvas {
display: none !important;
}
.sqs-block-image img {
display: block;
}
.section-background {
background: url("IMAGEURL");
background-repeat: no-repeat;
background-size: 100%;
}
}
}
}How To Use It
Copy and paste the code snippet as indicated above.
To learn how to find a collection id or page id, check out our Start Here guide.
Prepare a new background image for mobile. It works best if it is a vertical image.
Click on Asset Library.
Upload the Image. Right click on the image and select open in a new tab. This will give you the URL of the image.
Delete the word IMAGEURL in the code and add your image url.
If your image doesn’t fill the full height of the section, you can replace the background-size with the code background-size: 100% 100%; but beware that this may stretch your image.
Option 2: Display the Full Image with the Content Above or Below (Squarespace 7.1)
This will display the image fully across the site and put your content underneath.
Copy and paste this code into Custom CSS.
@media screen and (max-width: 1024px) {
#COLLECTIONID #page .page-section:nth-of-type(1) {
display: flex;
flex-direction: column;
background: #757263;
min-height: 40vh !important;
.section-background {
position: relative;
height: 100%;
}
.section-background img {
margin-bottom: -10px;
}
}
}Then add in your collection id, background color, minimum height, and image margin. You can also change the media query to the screen size of your choice. To display the content above, just change flex-direction: column to flex-direction: column-reverse .
How to Use It
Copy and paste the code snippet as indicated above.
To learn how to find a collection id, check out our Start Here guide.
Change the 1 to match the section you are trying to change.
Option 3: Change the Background Image to a Color on Mobile
Copy and paste this code into Custom CSS.
Squarespace 7.0
@mobile only screen and (max-width: 640px) { #PAGEID { background: red; } }
If the above did not work, try the following. Please note that this option does hide all images in the section.
@mobile only screen and (max-width: 640px) { #PAGEID img { display: none; } #PAGEID { background: red; } }
Squarespace 7.1
#COLLECTIONID #page .page-section:nth-of-type(1) { .section-background { display:none; } background: red; }
How To Use It
Copy and paste the code snippet as indicated above.
To learn how to find a collection id or page id, check out our Start Here guide.
If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.
You can use a word, rgb, or hex code for the color.
Option 4: Duplicate the Section and Hide the Other While on Desktop/Mobile
Note: This option may harm your SEO.
Create two sections (one designed for desktop and one designed for mobile).
Copy and paste this code into Custom CSS.
Squarespace 7.0
/* Mobile Header */ @media only screen and (min-width: 640px) { #DESKTOPPAGEID { display:block; } #MOBILEPAGEID { display:none; } } @media only screen and (max-width: 640px) { #DESKTOPPAGEID { display:none; } #MOBILEPAGEID { display:block; } }
Squarespace 7.1
/* Mobile Header */ @media only screen and (min-width: 640px) { #COLLECTIONID { #page .page-section:nth-of-type(1){ display:block; } #page .page-section:nth-of-type(2){ display:none; } } } @media only screen and (max-width: 640px) { #COLLECTIONID { #page .page-section:nth-of-type(1){ display:none; } #page .page-section:nth-of-type(2){ display:block; } } }
How To Use It
Copy and paste the code snippet as indicated above.
To learn how to find a collection id or page id, check out our Start Here guide.
If targeting one section in Squarespace 7.1, change the 1 and 2 to match the sections you are trying to show/hide.
Option 5: Change the Focal Point of the Background Image on Mobile
You can change the focal point of a background image by selecting Banner and moving the white circle on the image to the point you want the image to zoom into. However, you may like the way it zooms for desktop and tablet, but not for mobile.
Copy and paste this code into the Header Code Injection.
Note: This option is only available for Squarespace 7.1.
Note 2: You may need to reload the screen on mobile to see the change.
WARNING: If you have used this mobile check in your code already, using it twice will cause the code to clash. You will need to combine it together. Click here to see our list of known clashes and how to fix them!
Squarespace 7.1
<!-- Mobile Banner Image -->
<script>
function mobileCheck(x) {
if (x.matches) {
document.querySelector("#COLLECTIONID #page .page-section:nth-of-type(1) .section-background img").setAttribute("data-image-focal-point", "0,0");
}
}
var x = window.matchMedia("(max-width: 640px)")
mobileCheck(x)
x.addListener(mobileCheck)
</script>
<!-- End of Mobile Banner Image -->How To Use It
Copy and paste the code snippet as indicated above.
To learn how to find a collection id, check out our Start Here guide.
Change the 1 to match the section you are trying to change.
Change the 0’s to any number between 0 and 1 (0 = 0% and 1 = 100%). This will change the x and y position of the background focal point (horizontal, vertical).
Option 6: Display the Same Image (without cropping) on Desktop and Mobile
This option will only work if the section only contains an image. You cannot use this option if you need to have text or other content overtop the image. Plus, this strategy works best if the image does not have too much detail in it as the image can get fairly small on mobile.
Squarespace 7.0 (Brine Family)
In order for this code to work you need to insert the image as an image block and delete all other blocks in the section. Then copy and paste the following into Custom CSS.
Note: This code is set up for the Brine Family Templates and may have to be altered to support other Template Families.
#COLLECTIONID section:nth-of-type(1){ .Index-page-content { padding: 0 !important; } .sqs-block-image { padding-top: 0 !important; padding-bottom: 0 !important; } }
Squarespace 7.1
In order for this code to work you need to insert the image as an image block and delete all other blocks in the section. Then set the section height to 10 and the section width to 100.
Copy and paste the following code into Custom CSS.
#COLLECTIONID #page .page-section:nth-of-type(1) { .content-wrapper { padding: 0 !important; } .sqs-block-image { padding-top: 0 !important; padding-bottom: 0 !important; } }
How to Use It
Set up the section as described.
Copy and paste the code snippet as indicated above.
To learn how to find a collection id, check out our Start Here guide.
Change the 1 to match the section you are trying to change.
