Exporting the code generates some striking inconsistencies and completely brakes the layout
Here is a comparison between the 2
Here is the link to the site
I’ve tried duplicating it and the issue is still there.
I’ve changed the classes names to not include " _ " in them - no change
I’ve exported it from Safari/Chrome and Re-uploaded any custom fonts - no change
the only issue I can think of is Interactions 2.0. I’ve exported an older site with the legacy interactions and it went out fine. I’ve exported 2 sites with Interactions 2.0 and both had jumbled HTML code in them.
I’d love to get some help pls.
Read-only site https://preview.webflow.com/preview/bboxorder?preview=8b804708c4f68cea9c99a9ef65a26386
Live site http://bboxorder.webflow.io
Exported Code archive https://www.dropbox.com/sh/0yjt6f4j7p7ui0g/AABz06blcFe2Efll_oUqipVca?dl=0
@MihaiV before we start finger pointing how about you post a live link so that others may see what you see?
Under the image you can see i posted a link to my site .
Welcome to the Forum, and thanks for providing your read-only link
I think @Poliigon was referring to seeing the published (exported) site link as well, so that he can compare both versions in their ‘live’ state and inspect things under the hood.
Sure, here it is. Didnt know you cant see the published link from the read only link. Ma bad.
@MihaiV I have tested in the latest safari, ie, edge, chrome, firefox, opera on both IOS and Windows looks great to me
@MihaiV what browser and version?
@Poliigon thanks for the replay and taking the time to test it . Im sorry if I wasn’t clear enough: the site runs and looks great if its hosted on webflow. The issue only happens when I export the code and open the html file generated. Im away from my laptop and cant post a link to the archive. Ive made it clonable if that helps
@MihaiV when you get the link up where your having the issue let me know so we can look. Making it clone-able doesn’t help me help you. CSS & HTML are not server side languages, they browser languages.
Here you can find the exported code
If you open the menu.html you can see the issues I mentioned.
Thanks for posting about this issue.
To be able to compare, both versions need to be published - meaning that, since you exported the code, you’ll need to upload the files to your own server.
After, please post a link for the exported version and your webflow.io link so that the we can compare both versions and help further.
Thanks in advance.
Hi Nita, thanks for the reply.
Why do I need to have the exported files uploaded on a server? Does that change anything?
I’ve provided the full archive that Webflow generates. By simply opening the menu.html with notepad or any software you can see the html structure is messed up somehow. Doing the same thing with the inspector in a browser “fixes” that issue.
I’ve uploaded the archive here (as a live site) http://mihaivladan.com/bboxorder/index.html
The live site is here http://bboxorder.webflow.io
The read-only link is here https://preview.webflow.com/preview/bboxorder?preview=8b804708c4f68cea9c99a9ef65a26386
The archive (for download) is here https://www.dropbox.com/sh/0yjt6f4j7p7ui0g/AABz06blcFe2Efll_oUqipVca?dl=0
Here is another example :
On the left
- website made in webflow last year without interactions 2.0 and exported today. The code structure is flawless
On the right
- website made in webflow last week with interactions 2.0 and exported today. The code is ONE line
I might be mistaken about interactions being the issue. Maybe I used characters (ex: “-” or “_”) in the class names that somehow messed up the export. I’m just trying to figure out what I did wrong and not do it in the future. I love making live prototypes for clients and send them the archive for CSS/other values, and would like to avoid sending them something that looks broken.
Thanks, @Nita, and @Poliigon for taking the time to look over the files and the help so far!
Ok, I think I found out why the layout got messed up :
- as you can see in the screenshot, each div has a " " after it and a =$0
- if I enter a value and then delete it, the quotation marks disappear and the layout is fixed.
How those quote marks and the $ value got there, I have no idea.
@MihaiV I don’t see the preview anymore did you take it down?
@MihaiV after reviewing your source code the issue is some hidden characters got inserted into your html, while many things can cause this I am pressed on time to try and track it down. You most likely copied text from somewhere that contained this special character. Word documents, or any sort of medium that supports unicode. Anyway to remove these dots you can use a tool like brackets editor its free http://brackets.io/ open your menu page and remove the hidden characters.
Thank you for looking into it. Yes, I opened the HTML in Brackets and saw that red dot. If you copy and paste that specific character and put it here Unicode Inspector you get the following results
- ZERO WIDTH NO-BREAK SPACE
- LINE SEPARATOR
Based on your answer you make it sound like it’s my fault that somehow I managed to paste a "Line separator / Space " into the HTML file right after the code… where a “Line separator/space” should be.
As previously showed, the code in menu.html is exported on ONE line by Webflow.
If that would be true that I somehow “Inserted” that character by copy/paste …why is it rendering correctly on Webflow? Shouldn’t that error affect the site when its hosted by Webflow?
I have had a similar problem where my exported code was rearranged. In my case it was easy for me to find and correct the issue. I am sorry I don’ have your answer but I thought my empathy might help
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.