Jump to content

Apply CSS Only When Mobile Menu is Not Shown

Recommended Posts

I am in the process of building a plugin and I have noticed something odd in Squarespace 7.1. In the Squarespace Editor, the site switches over to the mobile menu at about 640 px in width. However, when I inspect the site with developer tools it switches at about 1024 px. 

My Plugin is only for the desktop version of the site (when the mobile menu is not active). The problem I am having is that if I set the code to be for screens above 640px it looks great in the Squarespace Editor but not on the live version. If I set the code to be for screens above 1024px is looks great live but not in the Squarespace Editor, which is confusing for my clients. 

Basically between 640px and 1024px, the live version is showing both the mobile version and my plugin. If I adjust for this, then when the client is editing in the Squarespace Editor, it looks like my plugin is not working. 

How can I have my CSS only apply to the non-mobile version without using the typical screen size media query?

Note: I have tried to reach out to Squarespace regarding this but they were not any help. 

Coding Wiz at rebeccagracedesigns.com

📖 Code Encyclopedia for Squarespace: rebeccagracedesigns.com/encyclopedia-of-code

🔥 Free CSS Tutorials: rebeccagracedesigns.com/blog

️ Free Guide to the 41 Most Popular CSS Properties: rebeccagracedesigns.com/popular-css-properties


Link to comment
  • Replies 1
  • Views 250
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.