Edit the Banner Image on Mobile in Squarespace 7.0

Responsive DesignSquarespace 7.0
Written By Rebecca Grace

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.

 
Squarespace automatically resizes the background image when responding to different screen sizes. Depending on the image you are using, you may not like the ...
 

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%;
}
 
 

Here are some other posts you may like:

Rebecca Grace

Rebecca Grace is a Squarespace CSS Expert and Website Designer.

https://rebeccagracedesigns.com
Previous

How to Display Images Side by Side on Squarespace Mobile View
Next

Use Anchor Links to Jump Down a Different Page