This works in Webflow designer, but not in any browser

[meadow]

Hello.
I’m trying to do something simple.
It’s supposed to show as 3 columns in desktop view, but 2 columns in tablet view and a smaller 2 columns in mobile view.

It works perfectly in Webflow designer as you can see here:

However, when I export and test it in a real browser, it doesn’t show 3 columns in any browser I used (Chromium, Edge, IE, Firefox, Opera). It only shows 2 columns in desktop browsers and one column in mobile view.

You can see the live version here:

So in summary, it works fine in the Webflow Designer, but not in a real browser. It doesn’t work in either Desktop or Mobile views.

Can you please tell me where I’m going wrong?

[samliew (webflowexpert.com)]

This is due to code being formatted properly with whitespace (tabs and spaces) when exported. If there are any space between inline-block tags, there will be an additional invisible margin.

To solve this problem, either float all the divs left, or remove spaces from the code.

Example of exported code:

<div>
    <div>some text</div>
    <div>some text</div>
</div>

Remove spaces like this:

<div><div>some text</div><div>some text</div></div>

[samliew (webflowexpert.com)]

Technical information and alternative solutions:

• html - How to remove the space between inline/inline-block elements? - Stack Overflow
• css - Ignore whitespace in HTML - Stack Overflow
• html - Two inline-block, width 50% elements wrap to second line - Stack Overflow

[meadow]

Thanks so much @samliew for helping and for your reply.
I did what you suggested and removed the spaces. In fact I simply minified the html using an online tool and it seems to work now!
Thank you again.