It’s been a few weeks that I started using Webflow, having previous experience coding websites by hand. I got my website almost done but I’m having some real trouble with the exported contact form.
Although I was able to make it work outside of Webflow, the form is not showing the css properties I set in the designer! I don’t know why, but the CSS for the FormBox as well as for all elements inside it is not showing, and it’s breaking the layout.
After further inspection I didn’t find a single problem in the code itself, but making manual alterations in mydomain.webflow.css and in webflow.css did not alter any of the classes in the live website css, even after clearing my browser cache multiple times. I don’t know whats this is but it’s really odd.
Anyway, the real trouble here is the fact that in my temporary domain (mydomain.webflow.io) the contact form is perfect, and after exporting the code, it breaks the layout.
Does anyone have an idea of what could be causing this, or a workaround to solve this CSS bug?
RE: the form. Give your input fields a height in pixels, not %. You are seeing the default height of 38px in Webflow’s base CSS, which is overriding your 90% value.
re: Portfolio
I see content so not sure why you aren’t. Your aware that CMS items don’t get exported right?
I just changed the height value from 90% to 70px, but I’m still getting the same issue. When I inspect the live website’s code in the browser, I don’t see all css classes being applied to FormBox and its children. Here’s a screenshot:
Hey @webdev thanks for the reply! It makes sense that the 90% height value is being overwritten, will watch out for future projects!
In the case of my portfolio page, I’m aware that CMS items don’t get exported, that’s why I build these items with common divs and hover interactions in them to avoid export headaches.
Each portfolio item has a bg div with the image, and another div on top of it that only shows on hover. The bg has position set to relative, and the hidden info has position set to absolute.
After inspecting the code, I’m seeing the same issue as with my contact form, where not all css classes created in Webflow are being applied to the element. Here’s the screenshot:
I cleared my cache multiple times, on 4 different browsers and on 2 other devices (one of them never accessed my website), and I still can’t see the divs! I don’t know how you can, am I doing something wrong?
Oh man this might be it! I installed Cloudfare CDN on my website, maybe it has a cached version of my site available near my area? Does it make sense? (not a CDN pro lol)
And how do I check if I’m seeing a cached version from a proxy server? Or a local dev instance?
I feel so stupid right now, I was developing and seeing the results on a cached page, which was driving me nuts!!
Thank you so much @Stan and @webdev for all your input, it was super useful to pinpoint the source of the problem. My first post here and it ended in SUCCESS!
Looking forward to being part of the community! Cheers!
