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.
