Exported page broken but ok when was in Webflow

Design help General
1

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:

webflow%20ok
webflow%20ok1686×976 63.3 KB

CHROME BROKEN:

chrome%20broken
chrome%20broken1007×1002 23.1 KB

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

2

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!

3

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

4

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>
5

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
6

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

7

Hello,
I’m having a very similar problem to Fabio_Vedovato one. My website works as expected inside webflow editor and on webflow hosting, but after export to the server it is completely broken in mobile version.
I’m having a huge problem with it as it should be ready by tommorow for my client and I didnt expect such bugs from webflow.

I would be very glad if someone could take a look at that and help me out.

Target domain, where problem occurs (on mobile version) http://culturecollective.pl/

Webflow domain: https://kamila-43bd55.webflow.io/

8

Hi @Jasiek_Radzikowski

Your webflow domain does not work. Can you show us a share link, so we can look into the project aswell… Since I’m not sure what is going wrong right now, and how it’s supposed to look.