Hero Banners & Mobile Optimization for Templates with Custom Code
(Applies to: Corruption & Main Street)
Before you change any Mobile settings: If you purchased Main Street or Corruption, read this short lesson first. These templates use small, targeted CSS to achieve their unique hero banner designs. Changing certain mobile-specific settings without understanding how they interact with that CSS can break parts of your site.
TL;DR — What you actually need to do
You don’t need to touch any code to use your hero banners. We’ve already set up a desktop hero and a mobile hero, and the site automatically shows the right one on each device.
Upload your hero graphics (provided Canva files that you edited) to the Desktop Hero section and the Mobile Hero section individually.
Do not delete or merge the hero sections.
Avoid changing section visibility, padding, or mobile layout toggles for the hero sections.
If you do accidentally delete a hero section, follow the recovery steps below.
How the hero swap works
These templates have two hero sections stacked on top of each other:
Desktop Hero → shows on larger screens
Mobile Hero → shows on phones
A tiny bit of CSS tells Squarespace: “Hide Section A on phones. Hide Section B on desktop.”
This approach gives you pixel‑clean typography, spacing, and art direction on both views—without you having to micromanage mobile styles.
Where the code lives
Depending on your template version, the snippet is placed in one of these:
Design → Custom CSS (site‑wide), or
Page Settings → Advanced → Page Header (home page only)
You don’t need to change this, but it helps to know where it is.
Your hero setup: exact steps
Open the Home page → find the Desktop Hero section.
Click Edit Section → Background → Replace → upload your Desktop Hero Canva export. You more than likely already did this in the homepage module
toggle to the Mobile Hero section → Edit Section → Background → Replace → upload your Mobile Hero Canva export.
Save. Preview on both desktop and phone.
What not to change (to keep things safe)
Do not convert the Mobile Hero into a duplicate of the Desktop Hero.
Do not delete either hero section unless you’re planning to recreate and re-wire it (see recovery below).
Avoid switching section layouts or radical spacing changes on the hero sections.
If something breaks
If you accidentally delete a hero section, change a setting that makes the banners act strangely, or aren’t sure what happened—don’t worry and don’t stress about the code. Just reach out and we’d be happy to help!
