Exported site CSS doesn't behave as the published site

Hello,

My published site CSS behaves differently than exported site

Here is the site on webflow:
http://areebworld.webflow.com/beta-players

Here it’s after exporting & uploading:
http://webflow.areebworld.com/players

As you can see, there is a long white space. It’s the result of me using a hack to vertically center the chat bubbles. However, the issue is not present in the webflow published version, even though it’s using the same code!

HELP!

Update

Solved by using @callmevlad suggestion.

@cdes, the only difference between the published and exported version should be that the HTML in the exported version is formatted in a “pretty” way. This introduces whitespace (and line breaks) which introduce subtle differences around elements styled with inline-block properties. Can you try removing the white space in the exported beta-players.html around inside everything that’s affected by your CSS rules that have very large line-height values? What’s happening right now is that these invisible spaces get treated as 256px high elements.

What I mean by ‘removing whitespace’ is structuring your HTML so it doesn’t have newlines, like so:

<div class="wvcenter"><h1>Text</h1></div>

Here’s a bit more background with some manual fixes you can make (notice the last method of commenting out whitespace): Fighting the Space Between Inline Block Elements | CSS-Tricks - CSS-Tricks

2 Likes

@callmevlad Wow… didn’t know about this!

Thank you, it worked!

1 Like

This has happened to me too … webflow has no way to do something automatic in the code to solve it in a faster way?

tnx