Overcoming whitespace issues when exporting inline-block elements

Design help General
1

Although webflow is an amazing tool, I really dislike the fact that I have to correct CSS when I export a site from webflow. Here is a perfect example

Published on Webflow: http://broker305com.webflow.io/new-developments
Exported Site: New Developments

It would be really awesome if yo can correct this.

Thanks

2

Both browsers: Chrome - Same Dimensions.

I’m guessing he is referring to the Learn More options and Subscribe Option

See video:

http://quick.as/qr60tBb8d

X------

Side Note: Look at your New Developments title on tablet and cell.
The title doesn’t fit correctly.

3

@dreps - just brought up both sites and inspected the elements that are different on both pages and it seems that the css settings are the same on a cursory examination. But there are some things to take a look at:

  • In webflow, the CSS file in an export package is not the same as when published. Look in the head of the resulting HTML of both sites. On publish, CSS files are consolidated and optimized. (But, of course, this is the one that seems to be working correctly.)

  • it looks like you may have included some other CSS files (like leaflet.css). Make sure any additional stylessheets are loading in the right order.

Definitely interested in your resolution when you find it.

4

HI @revolution, I’m actually referring to this portion of the page

1224×1219 1.05 MB
1628×1170 1.41 MB

5

I’ll look into that thank you. This actually happens to me on most projects I export. There’s always some element that’s completely wrong and I have to correct. Not a big deal but kind of annoying.

6

yes. those where the 2 sections I captured on the video… so that others could understand what you were referring to.

7

Please let us know what you had to change. For instance - is it a missing attribute or class? - or is it incorrect values?

I am building some things that are dependent on these files so it would be good to know where the problem is.

8

Hi @dreps, this is a known CSS issue with elements set to Display: Inline-Block. This article will help you overcome this: http://help.webflow.com/features/exporting#whitespace-and-inline-block

Hope this helps! :smile:

9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.