How to Add CSS to Make Elements Mobile or Desktop View Only on a Squarespace 7.1 Website

Adding custom code that hides certain elements on only mobile or only desktop view on your Squarespace website is a powerful way to tailor the user experience across different devices.

Whether you want certain elements to appear only on mobile devices or exclusively on desktop, this guide will walk you through the process using simple CSS media queries.

Why Customize Display Based on Device?

By using custom code to control which elements appear on specific devices, you can:

• Enhance User Experience: Ensure that users see content that's best suited for their device.

• Improve Site Performance: Reduce clutter on smaller screens by hiding non-essential elements.

• Maintain Brand Consistency: Tailor the display to ensure your brand’s aesthetics shine through on all devices.

Step 1: Access Your Custom CSS

1. In your Squarespace dashboard, navigate to the left sidebar under Website and click on Pages.

2. Scroll down and select Custom CSS to open the CSS editor.

Step 2: Add the Custom Code

To control the visibility of elements based on the device type, you’ll use CSS media queries. Here’s how you can do it:

1. Copy and paste the following code into the Custom CSS box:

// ONLY DISPLAY ON MOBILE //

@media only screen and (max-width:767px) {
  /*add style for mobile*/
}

// ONLY DISPLAY ON DESKTOP //
@media only screen and (min-width:768px) {
/*style for desktop and tablet*/
}

Customize Your Classes: Replace .mobile-only and .desktop-only with the actual class or ID of the elements you want to target. For instance, if you have a specific banner or section you want to show only on mobile, apply the .mobile-only class to that element in your site's code.

Step 3: Preview and Save

1. Preview Your Site:
   Check the preview to ensure your changes are correctly applied. Toggle between mobile and desktop views to verify that the elements are displaying as intended.

2. Save Your Changes:
   Once you’re satisfied with how everything looks, click Save to implement the changes on your live site.

Adding code to your Squarespace website doesn’t need to be daunting and you can check out the rest of my Squarespace resources to help you get to grips with adding custom code to your website.

---

Frequently Asked Questions

• Will this customization affect my site's performance?

  No, this CSS tweak is lightweight and won’t affect your site’s performance. It simply controls the visibility of elements based on screen size.

• How do I use this code to hide certain elements completely on my site?

  If you want an element to be hidden on mobile devices, write 'display: none' in the mobile media query.

  This is a useful technique for simplifying the user experience on smaller screens by removing non-essential elements.

• How to troubleshoot problems with this code?

  It's important to preview your changes after hitting "Save" on the code to ensure that it doesn’t conflict with other design elements on your site.