Create a 'Mobile View Only' Section in Squarespace
Squarespace’s fluid engine has made it much easier to customize your Squarespace website on mobile, but it’s not perfect.
We can’t blame Squarespace for this because not all phones are the same size, so what might look great in Squarespace mobile view may not look so good on your actual phone.
There’s not much that can be done about that. But sometimes you can take things a step further by using a little bit of code and using an entirely different section for mobile than what you are using for desktop.
And I would encourage you to do so when you have to because it’s likely that most people are viewing your website on their phones. You can check your website Analytics and see for yourself.
You may have already read my blog post How to Hide Blocks and Sections in Squarespace, but if you want to know how you can customize your Squarespace website for mobile even further with this easy solution, keep reading. ↓
You’ll Need the Block Identifier Chrome Extension
You’ll need to install the Squarespace Block Identifier extension into Google Chrome if you haven’t already.
If you’re working in Squarespace and doing any sort of CSS, it’s a must.
It’s super easy to use. Once installed, just click on the icon to see every ID from collections, index pages, sections, and blocks on your Squarespace page. Then, you can simply click on the ID to copy it and use it in your own code.
Design and Lay Out Your Sections
Chances are you’ve already laid out your desktop section to perfection (Hey, that rhymes!) and determined that it looks like 💩 on mobile…that’s why you’re here, right?
So now add a section right underneath it. You might want to duplicate the gorgeous desktop section so you’re not totally reinventing the wheel here.
Switch on over to mobile view in Squarespace and edit to your heart’s content. This section will only be visible on mobile, so don’t hold back!
What a great sense of freedom it is, isn’t it?
Hide the Mobile Version From Desktop
Now that you have one section looking gorgeous on desktop and one looking gorgeous on mobile, it’s time to add some CSS.
Add this bit of CSS to hide the gorgeous desktop section from mobile.
In your dashboard, go to Website > Website Tools (it’s at the bottom) > Custom CSS
Add the code snippet below.
Select the block identifier Chrome extension and click on the block ID of the section you want to hide from desktop—it will automatically copy when you click it.
Highlight this section of the code snippet → section[data-section-id="BLOCK-ID"] and paste the block ID you just copied.
Switch over to mobile view to check and make sure you did it right. If you did, don’t forget to hit, ‘save.’
/* describe what you're hiding from desktop */
@media screen and (min-width:768px) {
section[data-section-id="BLOCK-ID"] {
display: none;
}
}
Hide the Desktop Version From Mobile
Now you’re going to do exactly the same thing using the code below.
You’ll notice that the codes are very similar. The first code snippet targets a screen size no smaller than 768 pixels wide, and the code snippet below targets a screen size no greater than 767 pixels wide.
Meaning that the first code will only hide that section on screens that are 768 pixels wide or larger, and the code below will only hide that section on screens that are 767 pixels wide or smaller.
Basically, the break in screen size is between 767 and 768 pixels wide. Does that make sense?
Follow the same steps as above using the code snippet below, paste the block ID of the section you want to hide from mobile where it says section[data-section-id="BLOCK-ID"].
/* describe what you're hiding from mobile */
@media screen and (max-width:767px) {
section[data-section-id="BLOCK-ID"]{
display: none;
}
}Was this helpful?
Are you going to give this a shot? It’s pretty fun, actually, and very satisfying. Not to mention pretty impressive when you do it for a client. I’d love to know what you are using it for. Tell me in the comments!👇
This page contains affiliate links
My Insta
@jenxwebdesign
Like this post?
