I added a CE to my site, inside the CE, I used %-widths for columns. In the editor and in preview this works perfectly but the published version, all the columns shrink to the size of their contents.
I’ve created a dirt-simple demo here [ fergald. github. io/random/wix/custom-element/align-element.html ]. This CE is literally just 2 divs inside a div. In the editor/preview it looks like this
You can see that the element is taking up its full width.
On the live site [ www. tokyocomedybar. com/custom-element-problem ] it looks like this
You can see that the element is taking up exactly as much space as it needs.
In the editor and preview, the CE is wrapped in an iframe and so width: 100% fits it to the iframe but on the live site, it’s wrapped in a div from Wix that has width: auto and this is causing the element’s width: 100% to do be 100% of auto instead of 100% of the width in the editor. You can use devtools to remove the auto from the element id=comp-l0lp333m and everything renders nicely.
So, how do I make a CE that expands to 100% of the width just like in the editor/preview? It seems like a bug that preview and live are always going to be different like this.
Thanks.