How to Change the Background Image to a Colour When on Mobile
Banner Images are a great way to divide up the sections of an Index page on a Squarespace website. They really help to define the sections and make your content more interesting.
However, when making your website mobile friendly, these banner images may crop in the wrong place or make the section too busy for viewing on a mobile device.
Wouldn’t it be nice if you could have the banner image change to a colour when the visitor is viewing from a mobile? Why, yes it would!
This video goes into three ways you can change your banner image to colour when the visitor is viewing from a mobile device. The code has been provided for you beneath the video.
The following code is used in the video.
Mobile and Tablet 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 */ }
Option 1: Background Image to a Colour
Pros: Simple
Cons: Does not work on all templates
#nameofpage { background: #ffffff; }
Option 2: Hide Background Image and Add Colour
Pros: Fairly simple, works on most templates
Cons: Will hide all images in the section
#nameofpage img { display: none; } #nameofpage { background: #ffffff; }
Option 3: Duplicate Section and Hide the Other While on Desktop/Mobile
Pros: Will work on every template, allows you to fully customize section
Cons: May increase page load time and negatively impact SEO
#nameofpage { display: none; } #nameofpage { display: block; }
