Showing Custom Sections for Different Screen Sizes
An easy way to customize the mobile view on your Squarespace website
A common request I hear in Day Sessions is, “I love this section on desktop, but on mobile it doesn’t look as great. Can the mobile view be different, while keeping desktop the same?” I love this request, because I can say YES!
A little CSS is required, but it’s not too tricky and I have confidence in you! Try it first, and if you get stuck, there’s a link to contact me at the bottom of these instructions.
Step 1: Know how to check the mobile view of your Squarespace site
Log into your Squarespace site > Click Pages > Select the page you want to edit > Click the Mobile Icon on the right side, found next to an arrow pointing to the upper right corner of your screen.
Step 2: Install this extremely handy extension to find Section IDs
If you don’t already have this Chrome extension [linked here], it’s a game-changer for editing your Squarespace website! To use it, first click “Add to Chrome”, then go back to your Squarespace site where you can now click the extension icon to toggle it on and off. When it’s turned on, you’ll see a bunch of new text boxes that start with either “collection”, “section” or “block”.
Today we’re using “Sections” (at time of writing this, they’re the blue ones) and you can simply click the one over the section you’re working with to copy the data string - how easy is that?
If you use Mozilla’s Firefox browser, you can also find and use the Squarespace ID Finder extension there [linked here]!
Step 3: Add a code snippet to your Custom CSS
There are two “levels” of this that are useful in slightly different cases. You can choose which one is the right fit for your case, then find instructions for both just below.
Hide section(s) on mobile (see below)
Swap section for new custom section on mobile view [click here to jump to step-by-step guide]
Option 1: Hide Section on Mobile
In the case that you just want to hide the messy section and can do without that section on mobile, you can simply hide the section on mobile
In the main menu on the left-hand side, go to Design > Custom CSS. This will open an editor with a text box. Copy and paste the snippet below:
// HIDE SECTIONS ON MOBILE @media screen and (max-width: 641px) { section[data-section-id="YOUR-SECTION-ID"] { display:none !important; } }Now, follow carefully:
Find the specific section you want to hide on mobile (the one do want to display on desktop)
Using that handy Squarespace ID Finder extension, click the blue box with black text to copy your section ID of the specific section you want to hide
Then go back to the Custom CSS editor
Highlight the following text inside the editor, so that we can replace it: section[data-section-id=“YOUR-SECTION-ID”]
Paste (⌘V) to replace the placeholder text.
Don’t forget to click Save in the upper right!
The code in your CSS editor should look something like this:
If you want to hide multiple sections, use this code instead and the exact steps above repeated for each section:
// HIDE SECTIONS ON MOBILE@media screen and (max-width: 641px) {section[data-section-id="613b4b48c997891de63563ac"],section[data-section-id="613b4c4b2b1b020abe5cd2b7"],section[data-section-id="6114dd1df6d1b85de191b2d1"] { display:none !important; }}Option 2: Swap Section for a Custom Section on Mobile View
To take it a step further, you can swap out a section on desktop for a custom section designed specifically for mobile view. This can be useful in a range of situations, but you’ll need to take a few extra steps within this process to make sure it works properly. To summarize, we are going to:
Hide a section on mobile view
Create a custom section for mobile view
Hide the new section from the desktop view
The first step is create the custom mobile section. Here’s some advice on this:
Go to your the section you want to swap and click Edit
Hover over the section until you see the editing bar on the right and click the icon with what looks like two small, overlapping boxes to Duplicate the section
The new section can be edited for what you want to see on mobile view, then Save your changes
Now, in the main menu on the left-hand side, go to Design > Custom CSS. This will open an editor with a text box. Copy and paste the snippet below:
//CUSTOM MOBILE SECTIONS @media screen and (max-width: 641px) { section[data-section-id="YOUR-SECTION-ID-HIDE-FROM-MOBILE"] {display:none !important; } } @media screen and (min-width: 641px) { section[data-section-id="YOUR-SECTION-ID-HIDE-FROM-DESKTOP"] { display:none !important; } }First we’re going to hide the original section on mobile. Here’s how:
Find the specific section you want to hide on mobile (the one do want to display on desktop)
Using that handy Squarespace ID Finder extension, click the blue box with black text to copy your section ID
Go back to the Custom CSS editor
Highlight the following text inside the editor, so that we can replace it: section[data-section-id=“YOUR-SECTION-ID-HIDE-FROM-MOBILE”]
Paste (⌘V) to replace the placeholder text
Next, to hide the the desktop version of the section we’ll repeat these steps above, except this time we will:
Find the the specific section you want to hide on desktop (the one you do want to display on mobile)
Click the blue box with black text to copy your section ID
Go back to the Custom CSS editor
Highlight the following text inside the editor, so that we can replace it: section[data-section-id=”YOUR-SECTION-ID-HIDE-FROM-DESKTOP”]
Paste (⌘V) to replace the placeholder text
Click Save!
The code in your CSS editor should look something like this:
If you’re a visual learner like I am, here’s a video walking through the steps [linked here].
Step 4: Test your results
Amazing work!! To make sure the code is working properly, simply toggle between desktop and mobile view as described in Step 1 above and demonstrated below:
If you got stuck along the way, no worries! It’s totally okay (admirable, actually) to ask for help and delegate tasks that are sucking your attention away from the parts of your business that you love. Good news: I’ve made it really easy to knockout your Squarespace to-do list in just a few hours! Sit down with me for a session to:
have real support, from a real human
gain confidence in your web presence
get the most from your Squarespace website
finish your to-do list by the end of the day (yes, really!)