Streaming live at 10am (PST)

This works in Webflow designer, but not in any browser


#1

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?


#2

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>

#3

Technical information and alternative solutions:


#4

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.


#5

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