Site spacing/styles rendering different on different browsers

The article pages on my website behave strange in Firefox and Chrome, but works fine in the Webflow Designer and Safari. Screenshots to see the issue: Safari (same as designer; good) and Firefox (same as Chrome; bad).

Just spoke to a webdesigner - he told me that is is caused due to the use of absolute and relative? Any work-around suggestions are appreciated!

I don’t know if you’re still having the issue but for what I’m seen you’re using flexbox.

Flexbox does not behave in the same way in all browsers so I would suggest to test your site via the designer in Safari and Chrome.

Ok thanks for the reply. Seems odd that it works fine on all of the other pages, just the NEWS page has the issue?

Hi there @hms, thanks for the additional info. It looks like there is a styling on the article header class set to 100% and FF is rendering that differently than other browsers. I could not observe this on safari or chrome, but setting the height of the article header to “auto” should help:

I usually like to keep the sections with auto height and add padding if needed.

I hope this helps.

1 Like

This helped, thanks a lot!

1 Like

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