Rich-text Reply

Site pages not displaying correctly in Optimizely editor

billicatons 11-24-14
Accepted Solution

Site pages not displaying correctly in Optimizely editor

Unfortunately, I'm having difficulty getting pages from our site to display correctly in the editor. Instead of being formated as on the live site, layout is completely broken when I view a page in the editor (all content displays in one long, narrow column, left-aligned, often overlapping with other content). This goes for pretty much any page on the site.

 

The Optimizely snippet is installed on the site.

 

Has anyone had similar problems? Would appreciate help!

greg 11-24-14
 

Re: Site pages not displaying correctly in Optimizely editor

What's the URL you're trying to open? Might be able to help if we see it.
Level 2
billicatons 11-24-14
 

Re: Site pages not displaying correctly in Optimizely editor

Hi Greg. Thanks for your reply. Any page in the http://www.derek-rose.com domain (except for the initial 'set your location' page for US visitors, which seems to display okay in editor).

greg 11-24-14
 

Re: Site pages not displaying correctly in Optimizely editor

It's because of your CSS stylesheet (a640285a42213e48b4c9e57846cd4b3c.css), specifically this:

@media screen
.iframe body, .iframe .wrapper, .iframe .page, .iframe .col-main, .iframe .main, .iframe .main-container {
width: 380px;
}

This tells the site to be a width of 380px whenever it's being loaded through an iframe. And the Optimizely editor loads the site through an iframe...

Removing the above CSS code makes it load properly in iframes. But you'll want to check with your dev team and find out why that code is there to begin with... Maybe it serves an important purpose.
Level 2
Brian_Abad 11-24-14
 

Re: Site pages not displaying correctly in Optimizely editor

[ Edited ]

Great find, @greg! Optimizely indeed loads your webpage as an iframe and injects JavaScript via query parameters to allow for users to utilize the visual editor to more easily point and click to create the desired experimental changes.

 

Another thing to keep in mind for loading your webpage in the editor are other tips outlined within our knowledge base article: https://help.optimizely.com/hc/en-us/articles/200179074

 

Hope this helps!

---
Brian Abad
Manager, Technical Support
Customer Success
Optimizely
Amanda 11-25-14
 

Re: Site pages not displaying correctly in Optimizely editor

[ Edited ]

Hey @billicatons - 

 

If you are unable to remove of change the CSS stylesheet for iframes as @greg  mentioned, another option is to have your team create a static duplicate of your page that does not include the iframe styles. This will allow you to load the page into the editor and make changes as needed. You can then set your URL targeting to run on the live version of the page. It also will allow you to keep the iframe stylesheet in your production environment as is. 

 

 

Optimizely
billicatons 11-25-14
 

Re: Site pages not displaying correctly in Optimizely editor

Thanks very much, all, for replies. Greg, that's a really helpful spot, and I've passed this onto the web dev team to see whether the CSS portion is doing something important or not. Amanda, that's very useful as a fallback if the CSS can't be changed.

 

Cheers!

billicatons 12-03-14
 

Re: Site pages not displaying correctly in Optimizely editor

Just to close this off, I'm happy to say that we were able to remove the problematic CSS portion and that this has fixed the display issues. Thanks again to everyone for helpful suggestions!