Streaming live at 10am (PST)

Last item in row breaks to line below (safari)


#1

Hello can anyone help?!

I have Dynamic content spanning 3 rows - looks great in Chrome / Firefox but there is a bug in Safari.

In Safari the last item jumps to the second row and leaves a massive gap.

See the homepage on my website here (view in Safari obvs :wink: ) http://tenderpixel-test.webflow.io/

Reading past posts, I have already tried the following which didn't change anything:

Setting this dynamic area as Flex box, with 'wrap child'
Setting actual heights to my dynamic items, or Div containing

My dynamic data here, will be continuously filled in the future by the clients (...the page will have an endless scroll feature/loader when I get that far). Therefore I don't want to create Columns with set limited data

For example I have read else where that creating 3 columns with dynamic data limited from 1-3, and below this 4-6 etc etc is a potential fix. This won't work for me, as the dynamic data will be populated very regularly and months or years later this will be break (plus creates a lot of tedious work for me).

Does anyone know of a solution to fix this issue on Safari, without changing the way in which my dynamic data is designed?

Thanks - mucho headache over here - help would be amazing x


#2

Hi Rowena. I am facing the same alignment issues but across all browsers. So instead of creating a new topic I though I may as well post it here and share. Its user the link blog+media. Website is published to ecorganics.webflow.io

My site preview : https://preview.webflow.com/preview/ecorganics?preview=cfc5a8094392a363ee3dc203dadc0e11


#3

Hi @Rowena can you please update your post to include screenshots to show the breakage and your settings? This will allow us to help you faster. Thanks in advance!


#4

have you tried setting the width of the flexbox child sizing to 33.33333%?

https://cl.ly/3q351g08132f


#5

Hi @thewonglv - thanks here are my screen shots

Broken on Safari with a gap on the first line on the right

Working perfectly in chrome (and firefox):

The columns are set by the Dynamic Wrapper - rather then using set columns.

I am using the setting within Dynamic Wrapper, because using set columns (or flexbox) requires you to program each individual dynamic item...there will be hundreds as an endless scroll on this page - and hundreds more produced in the future.

I am looking for a 'break-free' solution, where by I can just use the Dynamic data settings - so looking for a solution to fix within these parameters.

Thanks - any ideas?


#6

Thanks @PixelGeek - yeah I thought of this and tried it in the past, however I am not using individual items, but Dynamic data, set to a column width of 3. Like this:

And where I can create 1 set of style settings, and my Dynamic data is imported like this:

This is because this page will be an endless scroll with hundred of Dynamic items, so I don't want to create individual dynamic items, Divs etc...1 because it is a crazy amount of work for me and leaves many possibilities for error...but also 2 eventually the page will be broken in the future when all the fields would have created run out.

So looking for a solution that allows me to use the Dynamic Wrapper Column settings - and that it doesn't break on Safari.

What do you think - any ideas?


#7

Hi @Rowena, for some reason it appears to work as expected on my end - can you please tell me the exact browser version your safari is so I can run some more tests?


#8

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