Streaming live at 10am (PST)

Site spacing/styles rendering different on different browsers


#1

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).


#2

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!


#3

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.


#4

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


#5

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.


#6

This helped, thanks a lot!


#7

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