Skip to main content

Responsive Device Switcher or Add CSS/JS does not work

Last updated on Apr 22, 20261 min read

How to recognize the error​

If you want to display and edit your website responsively or you want to add CSS/JavaScript in your variation, but your website does not load and displays an error, then it is due to the framing restrictions.

Varify editor in responsive mode showing a refused connection; the console reports that the frame was refused because of „X-Frame-Options: deny“ Varify dialog „Add JS“ whose code field stays empty and reports „This content is blocked. Contact the site owner to fix the issue.“

How to fix the error​

Solution 1: Using the Varify.io® Chrome Extension​

So that you can still create your variations, you have the option of bypassing this framing restriction with the Varify.io® Chrome Extension.

  1. Download the Varify® Chrome Extension
  2. Activate it in your browser and store your Varify® code snippet
  3. Activate the "Allow Responsive Device Switcher" switch
  4. Reload the page - Ready!

Now everything should work as expected.

A more detailed explanation of installation and activation, as well as other functions, can be found here: Varify® Chrome browser extension

Varify editor with the device switcher off, showing an empty page, and with it on, showing the rendered page

Solution 2: Customizing the X-Frame options on your own website​

If you see an error message like in the screenshot above, a framing restriction is not allowing you to load the page in the responsive device switcher.

The normal desktop view of the visual editor is not affected by framing restrictions.

If your page is delivered with the response header X-Frame-Options with the value "deny", responsive editing cannot be used.

A sensible solution in this case would be to relax the restriction to X-Frame-Options: "sameorigin".

X-Frame-Options: "sameorigin" allows your pages to be embedded in a frame from your domain, but does not allow them to be embedded from other websites.