Rich-text Reply

Pages not displaying properly in Optimizely editor

joannaoree 09-11-15
Accepted Solution

Pages not displaying properly in Optimizely editor

[ Edited ]

I'm changing some buttons that overlay on top of an image of all our products. In the editor the buttons are in the right place but once switch to preview mode they end up very high up the page and therefore dont correspond to the photograph behind it anymore. Does anyone know how to fix that? 

I clicked load page wtih unsafe script so it should be loading fine but that still hasn't solved the issue..

Re: Site pages not displaying correctly in Optimizely editor

Hi @joannaoree,

 

Would you be able to share your experiment ID or your variation code here so we can take a further look?

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com
 
joannaoree 09-11-15
 

Re: Site pages not displaying correctly in Optimizely editor

Hi, Thanks for your help its - ID: 3471610561

Re: Site pages not displaying correctly in Optimizely editor

Hi @joannaoree,

 

Thanks very much for sending over your experiment ID.  While I wasn't able to see your page in the editor, I took a look at your variation code and noticed you're doing quite a lot of positional CSS movements.  Can you confirm you've used Move and Resize quite a lot in our Visual Editor?

 

If so, that much CSS movement can render differently in certain browsers, or even in the same browser outside the context of our editor.  We recommend Move and Resize be used sparingly and for very small or fine movements on the page.

 

It also looks like you're repeating a lot of changes on the same elements.  In general, the last change you make wins.  You can see all the lines of jQuery code your visual changes have made by clicking the small blue < edit code > button in the lower right-hand corner of the visual editor.  This opens our Code Editor, and if you're comfortable editing jQuery, you can either delete earlier lines of code or combine two or more lines of code on the same element into one.

 

Here's an example.  Here are lines 1-5 of your variation code:

$("#banner > div:eq(1) > i:eq(0)").css({"color":"#100e0e", "height":"30px", "width":"30px"});
$("#banner > div:eq(1) > i:eq(0)").css({"position":"relative", "left":-32, "top":-11, "width":23, "height":23, "z-index":"2147483646"});
$("#banner > div:eq(1) > i:eq(0)").css({"color":"#ed4040"});
$("#banner > div:eq(1) > i:eq(0)").css({"left":2, "width":23, "height":23});
$("#banner > div:eq(1) > i:eq(0)").css({"top":1});

You could make this one line of code that applies the latest (combined) changes:

$("#banner > div:eq(1) > i:eq(0)").css({"position":"relative", "color":"#ed4040", "left":-30, "height":"23px", "width":"23px", "top":-10, "z-index":"2147483646"});

Do these suggestions help?

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com