I am building my first website (for my wife’s business). My problem has been exporting code from Webflow and getting it to work the same way it does in the designer and on the published webflow.io website.
Here is the link to my read-only (I removed this after problem solved)
Here is a link to the webflow.io published site (removed after problem solved)
Here is a link to the site hosted on my domain name.
(removed after problem solved)
There are three problems but only the first one is critical, you can ignore 2-3 if you don’t have time:
My Contacts page has a card that renders completely differently on the site hosted on my domain name. Originally, the text was just overflowing the box and the spacing and indents were wrong. I have since tried different ways to build the card (Grids, Flexbox, etc.) to try to get the exported code to recognize and accurately display the element. Now it is completely exploded and not even recognizing the css classes or anything. With this one I really have no idea what is wrong or what to do.
The homepage originally had a simple fade-in of the Hero Image. The hero image (which I made as a component in Figma and then imported into Webflow), was being named as “.Animation__HeroTransparent.jpg”. (I believe) This file name was breaking the Hero container which had two elements with absolute positioning on them, which was not working in the website hosted at my domain. My solution was to get rid of the animation. However, after deleting the page trigger interaction from the element and cleaning all unused interactions using the broom icon, and deleting the “.Animation__HeroTransparent.jpg” from the assets menu, the interaction still shows up in the html file that is exported by Webflow. My temporary fix to this problem is to use Microsoft notepad to find and replace “.Animation__HeroTransparent.jpg” with the name of the same photo without the “.Animation” part, as well as deleting the “.Animation__HeroTransparent.jpg” from my image folder, as it is still appearing even after I deleted it in Webflow Assets. This works, but is a bit of a pain to have to do each time I have to redesign and upload the html code to my webhost.
I also had problems with paragraph text boxes that did not render correctly on my domain name website. A paragraph text box did not have spaces between paragraphs and began indenting from the second paragraph on. I solved this by creating unique text boxes for each paragraph in Webflow and re-exporting, but this doesn’t sound ideal if in the future I have a website with lots of body text.
Also, Is there a set of tutorials on best practices for working in webflow with the intention of exporting the code? I would like to learn and use Webflow, but I might also want to host elsewhere. It seems like there is probably a specific workflow / best practices for creating a website that will export.
Thanks in advance for your help and I apologize for the messy class descriptions. I am just trying to figure out how this works and fumbling around and getting impatient, so it is a bit disorganized.
https://www.lydiebonnetbrown.com/contact.html <!-- Last Published: Sun Jul 07 2024 11:30:52 GMT+0000 (Coordinated Universal Time) -->
https://lydiebonnetbrown.webflow.io/contact <!-- Last Published: Sun Jul 07 2024 12:08:03 GMT+0000 (Coordinated Universal Time) -->
There are differences in your CSS. So I would first make sure that the self-hosted site has the most current build. If it does then turn off caching in Cloudflare (since you are using it to proxy). If there is still a difference then flush your browser cache. Once you have the current assets being loaded then you can resume caching with Cloudflare. Welcome to web dev.
I tried to address the problem based on what you suggested. It did not resolve the issue, but let me list the exact steps I took as there might be a problem in my procedure here.
I exported the code from Webflow into a zip folder.
I republished my website through webflow to (removed after problem solved)
I edited the (removed).css file in the zip folder using microsoft notepad. I used the replace all function to replace “.Animation_HeroTransparent.jpg” with “Lydie-Hero-Backdrop-LonRight-From-File-Menu.jpg” which correct the problem #2 I mentioned in my initial post. I also deleted the “.Animation_HeroTransparent.jpg” from the images folder.
I deleted all files associated with my previous version of the website from my webhosts public_html folder.
I uploaded and then unzipped the exported the zip folder with the code I got from webflow (with the edits mentioned in #3 above) into the webhosts public_html folder.
I purged the cloudflare cache for the website (removed after problem solved)
I cleared my Chrome browser cache by deleting all browsing data, including cached images and files, cookies, history etc.
I am still experiencing the same issue. Can you see a problem in my procedure above? Or could it be something else?
I am attaching two images that show the differences in the css for these elements. The first image is from webflow.io and shows the website working properly. The second is from the site I am hosting on my own dowmain. You can see that the webflow.io website has properly identified it as a flexbox and the site on my domain has not. This is true for several of the frames within this element. As far as I can tell the other elements of the webpage are functioning fine. I don’t know anything about coding or how I might resolve this problem. Should I just figure out the code and edit the css file directly? If so, is it only the lydiebonnetbrown.webflow.css file that I should edit or are there other files that need to be changed?
Even if just directly changing the css file would work, I’d prefer if I knew what the problem was exporting from webflow so that I don’t continue to have this kind of problem in the future
Nothing changed because your CSS file is not up to date which I confirmed by looking at elements that are not rendering like you want.
All the assets from your exported project need to be uploaded to your host. This includes files in subdirectories like /css/lydiebonnetbrown.webflow.css
I am sorry, maybe there is a misunderstanding because I posted twice in a row. If you look at the post above the one in which I show the images of the css being different on the two different websites I go over how I did update all of those files on my webhost and I outlined the procedure for how exactly I did that and (tried to) follow your suggestions in your original post. Is there something wrong with how I uploaded the files that you can see in the step by step process I gave? Thanks again for your help.
and just to clarify my description above, in the process I removed all files from public_html folder on the cpanel of my host (except for the one folder that came preloaded “cgi-bin”) and replaced it with the zipped folder I received from Webflow and extracted that into the public_html folder, so all files should be present and there should be no conflicts.
When the timestamps were wrong I was not going to spend my precious day off debugging your issue. I checked and did see that you synced your build so I decided to give it another look.
This was a very complex issue to debug. I only went down the rabbit hole because it was perplexing and not very obvious. Honestly it took me far to long than I care to admit. It’s hard debugging someone else’s work since you have no Idea why they made the choices they did.
The issue is white-space: pre-wrap because while Webflow compresses HTML output on their hosted infrastructure, exported code is not compressed. So that rule is adding spacing to the address DIVs which increases the height, breaking the intended layout.
The declaration of pre-wrap defines that sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Get rid of that property and you will see the layout return to your intended design.
Even I can’t even make sense out of the decisions I made when creating the site, so I am sure it was difficult to debug. Hopefully when I build the next one I will have a better grasp on how the page/elements should be named and organized.
