Alignment issue on https://demosites.io/speed/

[rodica-andronache]

Description

When importing this demo https://demosites.io/speed/product/pro-demo-product-3/ the social icons at the bottom of the single product page has an alignment issue https://vertis.d.pr/i/RL2ltv

Step-by-step reproduction instructions

On demosite we have an older version of Elementor. Maybe that's what's causing this

@mghenciu

Screenshots, screen recording, code snippet or Help Scout ticket

No response

Environment info

No response

Is the issue you are reporting a regression

No

[HardeepAsrani]

@mghenciu Can you check if you're able to reproduce it? I tested on Firefox/Safari/Chrome and it seems to work fine for me.

[rodica-andronache]

@HardeepAsrani if it helps
https://code-fight-nego.vertisite.cloud/product/pro-demo-product-7/

https://code-fight-nego.vertisite.cloud/wp-admin
user: admin
pass: NQ1YqM2068AtiT!e0Ow#(Gfr

[mghenciu]

@mghenciu Can you check if you're able to reproduce it? I tested on Firefox/Safari/Chrome and it seems to work fine for me.

Rodica refers to the issue, after the demo is imported.
Note: the mentioned section is added via a Custom Layout.

I've tried some things on this, even changing the padding/size on the main site - but the issue is still present on the imported site. It may be related to how Styles are loaded, or something else - since that section looks ok in preview. Check the video below:

Screen.Recording.2023-04-10.at.16.50.16.mov

[HardeepAsrani]

@mghenciu @rodica-andronache Thanks; I was mistakenly importing Gutenberg templates. Yes, it seems to be because of different version of Elementor, I can see different CSS being loaded in both places.

@mghenciu How do we handle this? Like updating Elementor on demosites?

[mghenciu]

@mghenciu How do we handle this? Like updating Elementor on demosites?

Usually we do a testing session on staging, for major versions of Elementor or Woo. To make sure things are ok before updating.
In this case, since it's not a major version - I've updated Elementor on demosites to the latest version.

I guess now, we can wait some time for the sync up - to see if the issue is fixed.
For now, the social icons on the the products Page look as expected.

[HardeepAsrani]

Alright, thanks @mghenciu

[HardeepAsrani]

@mghenciu I was checking to see if this was fixed and seems to be the same. Anything else we can do here?

[mghenciu]

I tried taking another look, @HardeepAsrani , also inspecting the code between demosites and a test instance - but without luck.

If you can take a look, from a developer perspective, to see what are the differences between the demosites and the test instance - that would a step for a potential solution. My guess is that some things are not loaded the same way on live vs preview/demosites.
For example the Icons work as expected when previewed from the Custom layout edit mode, but not in the live context (attached).

Screen.Recording.2023-05-02.at.12.05.13.mov