Apply CSS Only When Mobile Menu is Not Shown

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. 

When the mobile menu is activated, the body tag is added to a class (I don't remember the name). You can check this out.