Hide elements in mobile view in Squarespace 7.1

Having a mobile-friendly website has become essential in today's digital landscape. It provides an excellent user experience, leaving a strong first impression of your brand, leading to increased sales. Additionally, optimizing for mobile positively impacts SEO and Google ranking, making it a crucial aspect of your website strategy.

While Squarespace offers a flexible platform for easy customization, there is one challenge: the layout that looks perfect on desktop may not translate well to mobile devices. Fortunately, by incorporating some simple CSS into your Squarespace 7.1 website, you can optimize the mobile view and hide specific elements as needed. In this tutorial, we will guide you through this process.

1. Install "Squarespace Collection/Block Identifier" Chrome Plugin

To begin this tutorial, we'll need to understand the concept of "block codes."

Block codes serve as identifiers for specific elements on your website. They play a crucial role in our process of hiding elements on the mobile view.

You might find the idea of working with block codes a bit intimidating, but don't worry. There's a fantastic Google Chrome extension that makes this task a breeze. It's called the "Squarespace Collection/Block Identifier". The best part is that it's completely free!

To get started, simply add the Chrome plugin to your browser's toolbar. Once installed, open your website and click on the "B" icon located in the top right corner of your browser to activate the extension. Voilà! With just a click of a button, the extension will magically display the block codes for all the sections on your website, making the process much more manageable.

2. Add CSS Code

Now that you have the Squarespace Collection/Block Identifier Chrome extension installed and ready to use, let's proceed to hide elements on the mobile view. Here's how you can do it:

1. Go to your Squarespace website and navigate to the "Design" section.

2. Look for the option to add custom CSS. This is where we'll insert the code to hide elements on mobile.

3. Add the following CSS code snippet:

// HIDE ELEMENT ON MOBILE //

@media only screen and (max-width: 768px)

{#block-***********  {display: none;}}

4. Now replace #block-*********** with the block code of the element you want to hide.

That’s it, very simple!

KEY TOPICS

1. INSTALL THE FREE CHROME PLUGIN

2. ADD CSS CODE