Page renders differently when live vs. in editor
Hi Optiverse! I am hoping you can help me figure out a solution to this problem.
I have created 2 different variations of my landing page that I would like to A/B test. In the editor, I have re-organized the information how I would like it to appear and it looks good. As soon as I start the experiment, it has a white bar on the right side of the page as though the content is not centered. This is even worse on larger screens (mine is 13 inch). This is only a problem when I have the experiment running and is not an issue on my wordpress website. I cannot figure out how to fix the problem because in editor it looks good.
I have cleared cache/history and tried on multiple computers.
Solved! Go to Solution.
Thanks for reaching out!
I think this issue is that you may have used the "Rearrange" to move elements around and this overwrote the CSS settings of your WordPress website.
When moving element around in the Visual Editor, Optimizely will place these elements on the page using hard-coded pixels points. This means, that in some cases, it is possible that the changes do not reflect well on the mobile version of your website or when loading your page in a different screen size. In your case, I'd recommend the following:
- We have a dedicated article on how to make your changes in the Visual Editor fully responsive, you can check it out here. This will allow you to use percentages instead of pixels to make sure the changes you make in the Visual Editor look good accross all screen sizes
- As far as testing, to avoid unwanted changes on the live version of your website, we always advise to test your experiment before running it live. This Knowledge Base article should guide you on doing exactly just that.
I hope that is helpful. Feel more than free to reply back with any additional questions at all.