This works in Webflow designer, but not in any browser

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?

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>some text</div>
    <div>some text</div>

Remove spaces like this:

<div><div>some text</div><div>some text</div></div>
1 Like

Technical information and alternative solutions:

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.

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