Edit the Banner Image on Mobile in Squarespace 7.0
Banner and background images are a great way to divide up the sections of an index page. To help your site be more mobile-friendly, Squarespace automatically resizes these images depending on the size of the viewer's screen. However, depending on the photo, you might not like how Squarespace crops your photo.
In a previous video, I showed you how to change the background image to a colour when viewed from a mobile device. In this video, I will show you how to change the banner to a different image when viewed from on a mobile device. The code used in the video is provided below.
The following code is used in the video.
Mobile Breakpoints
/* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ /* Insert Code for Tablet Above This Line */ } /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ /* Insert Code for Mobile Above This Line */ }
Mobile CSS
#PAGEURL img { display: none; } #PAGEURL .sqs-block-image img { display: block; } #PAGEURL { background: url('IMAGEURL'); background-repeat: no-repeat; background-size: 100%; }