Cross Browser testing

[#1]

I'm trying to setup a test which tests the position of the upsells on the product page. the problem though is that the tes keeps showing slightly different in different browsers. I have used the rearrange tool to move the upsell feature.

On an android phone for example it completely removes the description. I have spent a full day trying to get it working but don't know what else to do? See eample links below.

https://www.oneills.com/tipperary-gaa-carron-polo-shirt.html?optimizely_x5696410453=1

https://www.oneills.com/tipperary-gaa-carron-polo-shirt.html?optimizely_x5696410453=2

https://www.oneills.com/tipperary-gaa-carron-wmns-polo-shirt.html?optimizely_x5696410453=1

https://www.oneills.com/tipperary-gaa-carron-wmns-polo-shirt.html?optimizely_x5696410453=2

https://www.oneills.com/kilkenny-gaa-carron-polo-shirt-amber.html?optimizely_x5696410453=1

https://www.oneills.com/kilkenny-gaa-carron-polo-shirt-amber.html?optimizely_x5696410453=2

[#2]

Hi,

Thanks for letting us know what methods you are using to build the variation. I looked at your experiment's variation code and it appears that 2 lines of code was generated when the rearrange tool is used. Here are the 2 lines for one of the variations:

$(".desc-prod").css({"left":"0px", "position":"relative", "top":"0px"});
$(".desc-prod").detach().insertBefore(".footer-contain");

Can you do me a favor and remove the line that contains .css in all the variations and let me know if it resolves the positioning issue on desktop browsers? You can access the variation code by clicking on the blue "edit code" box on the lower right of the editor.

If you are not seeing the description box on an Android device then the mobile site's code on the mobile version of the site may be different than the desktop. I recommend creating a separate experiment that targets mobile devices and switch the visual editor to display the mobile version of the site. Here are 2 articles that will help you with this set up:

Adding an audience condition to your Experiment.

Displaying the mobile version of a page in the editor.

David

[#3]

Hi David

Thanks for getting back to me. I have removed all lines containing .css but the description is still rmoved in google chrome and internet explorer. Any ideas?

Thanks
Declan

[#4 · Accepted solution]

Hey Declan,

If the test is to move the recommendation box above the product description then I recommend using jQuery's "insertBefore()" method to move the box. Here is a line of code that will take the recommendation box and reposition before the product description:

$(".box-collateral").detach().insertBefore(".desc-prod");

Please create a new variation, click on the blue "edit code" box on the lower right, paste the code above, click apply and save the variation. 

David

[#5]

Hi David

Thank you, that worked perfectly.

Thanks

Declan

[#6]

Hi David

I have tried to apply this experiment to more products to get more traffic through my experiment. I'm running into problems though with products that have a product related to it. See link below. Would you know how I fix this so that that the upsells sit alongside the related product?

https://www.oneills.com/dublin-gaa-parnell-2stripe-t-shirt.html?optimizely_x5696410453=1

Many Thanks
Declan