Re-opening ticket “Elementor editor layout differs from live page after 24 hours”

Hi Jack,

In response to https://www.8theme.com/topic/elementor-editor-layout-differs-from-live-page-after-24-hours/#post-472163

At the moment, this issue does not appear to be related to our theme. We recommend that you check with your hosting provider to ensure that no automatic backup has been uploaded. Additionally, if you have developers, they may be able to reapply or restore your changes

I want to share the following bug report. If needed, I can share screenshots and relevant JSON files.

Elementor container flex direction not generated correctly in single product template

Summary

A Single Product template created with Elementor Pro renders correctly inside the Elementor editor, but the frontend consistently renders one specific container as a vertical layout instead of a horizontal layout.

The HTML structure is correct, the correct template is loaded, but the generated Elementor CSS is missing the –flex-direction: row declaration for one container.

Problem Description

Inside Elementor, the Single Product template displays correctly. The main desktop layout consists of:

Product Gallery
|
+– Product Image
+– “Complete the Look” section

Both sections should appear side-by-side.
On the frontend, however, they are rendered underneath each other because the parent container becomes a column layout.
The issue only affects one template used as the “general” Single Product template.
Another template assigned to individual test products always renders correctly.

Expected Behaviour

Desktop layout:

+———————-+———————-+
| Product Image | Complete the Look |
| | Recommended Products |
+———————-+———————-+

Actual Behaviour

Desktop layout:

Product Image

Complete the Look

Recommended Products

The parent Elementor container behaves as if: flex-direction: column; instead of flex-direction: row;

Troubleshooting Performed

The following possibilities have been systematically excluded.

1. Template corruption
Two cloned Single Product templates were swapped.
Result:
whichever template became the general template failed
whichever template became the specific test template worked correctly
Conclusion
The issue does not follow the template content.

2. Product-specific issue

Products were reassigned between templates.
Result:
Products assigned to the dedicated test template always rendered correctly.
Products rendered through the general template always failed.
Conclusion
The issue does not follow individual products.

3. Display Conditions

Tested using:

Products
XStore Brand
Product Tags
Category exclusions

Also excluded overlapping templates.
No change.
Conclusion
The problem is not caused by incorrect Display Conditions.

4. Cache

Cleared:
Elementor CSS & Data
WordPress cache
Hosting cache
Browser cache
Incognito testing

The incorrect layout immediately reappears.
Conclusion
Caching is not causing the issue.

5. Template Selection

Verified via page source.
Correct template IDs are loaded.

Good product:

data-elementor-id=”37619″

Problem product:

data-elementor-id=”37636″

Therefore Elementor is loading the intended template.

Root Cause Investigation

The generated CSS for template 37636 was inspected.
The parent container:

elementor-element-7123a92

Contains:

.elementor-37636
.elementor-element.elementor-element-7123a92{
–display:flex;
}

However it is missing

–flex-direction: row;

Without this declaration Elementor falls back to the default column direction.

Workaround

Adding the following CSS immediately fixes the issue:

@media (min-width:1025px){

.elementor-37636
.elementor-element.elementor-element-7123a92{
–flex-direction:row !important;
}

.elementor-37636
.elementor-element.elementor-element-7123a92 > .e-con-inner{
flex-direction:row !important;
}

}

After applying this CSS:

layout becomes correct
no other changes required
HTML remains unchanged

Conclusion

The affected container is explicitly stored as a row container in the current Elementor template export. The exported JSON contains “flex_direction”: “row” for the container carrying the class complete-look-layout. However, without custom CSS, the frontend renders this container as a column. Applying –flex-direction: row !important to the same class immediately restores the expected layout. This indicates a discrepancy between Elementor’s stored template configuration and the CSS applied on the frontend.

Technical footnote

Element IDs in the exported Elementor JSON do not match the element IDs used in the generated frontend CSS, apparently because Elementor transforms or regenerates element IDs during export. Therefore, the affected element was correlated using its CSS class and structural position rather than by raw element ID.