Streaming live at 10am (PST)

Exported page broken but ok when was in Webflow

Hello,

I’m experiencing layout breaking both in chrome and firefox of this page I designed in Webflow.

Please, may you help?

Thanks,
Fabio

WEBFLOW OK:

CHROME BROKEN:


Here is my site Read-Only: https://preview.webflow.com/preview/dataplay-fun?utm_medium=preview_link&utm_source=designer&utm_content=dataplay-fun&preview=5a6966c4602e9d6b6d78bb50bbb4e489&pageId=5d8bbda0aeeac74a8434228d&mode=preview

Website http://www.dataplay.fun

Hi Fabio,
Can you try to re-export the page and see if the problem consists?
It seems that .Div Block 38 somehow became Div Block 39's parent instead of staying it’s sibling.
Image%20002

btw, I really can’t recommend enough having ANY naming convention instead of having endless list of divs with the name .Div Block ## to your classes/selectors. Even more so when you export your code!

Hello Aviv,

Thanks for your reply.

I assigned names to divs in order to better recognize them. Thanks for the suggestion.

I re-exported but the issue is still present.

There’s custom code in both input and output areas to have a textarea input.

I checked the code inside: every tag appears opened and closed correctly.

Fabio

Have you exported it with minified code? I sometimes have simular issues as this problem too.

image

Export -> CTRL+ O -> check the Minify HTML

Also try to avoid adding spaces in your selectornaming. Try to use - or _ instead of a space.

But I think this is your main problem: You are missing a closing in your HTML embed:

<div class="Settings" id="Settings">
		<div id="workarea_settings_input">
			<textarea 
			id="SettingsInputArea" 
			spellcheck="false" 
			style="padding:8px; padding-top:6px; white-space: nowrap; overflow: auto; outline: none; resize: none; width:100%; height:100%; bottom:0; min-height:130px; border-radius:2px;">
			1	ONE
			2	TWO
			3	THREE
			4	hello
		</textarea>
	</div>

See you have two div’s the “Settings” and “workarea_settingsinput” you are only closing the workarea_settings_input. add the closing div at the end to close the “Settings” div.

<div class="Settings" id="Settings">
		<div id="workarea_settings_input">
			<textarea 
			id="SettingsInputArea" 
			spellcheck="false" 
			style="padding:8px; padding-top:6px; white-space: nowrap; overflow: auto; outline: none; resize: none; width:100%; height:100%; bottom:0; min-height:130px; border-radius:2px;">
			1	ONE
			2	TWO
			3	THREE
			4	hello
		</textarea>
	</div>
</div>

Hello Elvira,

I made the correction to that closing tag missing and exporting it as minified HTML (CTRL+O) and it works perfectly.

Thanks a lot for the information!

Fabio

1 Like

You’re welcome! I’m glad it works now!