Streaming live at 10am (PST)

Bug with Div Blocks in Grid?

Something doesn’t work with a grid and the only explanation for the problem that I can think of is a bug - possibly in the grid, but it might be something else entirely.

I’m using a grid to display information on my service. It looks like this:

I structured it this way:
The background “Service BG” is a div and it’s flex (vertically, aligned towards top and bottom). There is an icon with a white circle around it, a title and some text underneath it. I want the title and the icon to be in the exact same position in every grid box, so I put them in a div and set the hight to 20%.

52

I did this in one grid box and then copied it into the other grid elements. Now I want to change the text in the respective boxes, but for some reason it won’t work in one of them. For some reason it looks like this, but only in one of the boxes.

It’s telling me in the designer surface that it looks this weird because the mini title is no longer inside the div. This is weird, because I never took it out of it. So somehow it automatically took an element out of the div.

But I can’t fix it by putting the element back inside the div because according to the navigator the element is still inside the div.

I was wondering whether there was an issue with the background being a flex box, so I changed it to the “normal” state. It looked normal in every box, except the buggy one:

I have no explanation as to why there is a discrepancy between what the navigator and the design surface are telling me - other than a bug.

I hope this makes sense. It’s actually quite difficult to explain this stuff well, so I’m sorry if this sounded patronising or was a bit unclear :smiley: . Any help is appreciated :slight_smile:


Here is my site Read-Only: LINK

Hello, @Amelie1!

Thanks so much for posting this. I’m looking into this now and will post here again as soon as I know more!

1 Like

Hi @rileyrichter ,

thanks for the quick response! Looking forward to hearing from you :slight_smile:

Can I keep on working on the grid or should I leave everything as it is?

Hello, @Amelie1!! I think I’ve spotted the problem!

Here is a video to show you how to fix this:

CloudApp

Let me know if you have any other questions and I’ll be happy to help! :webflow_heart:

1 Like

@rileyrichter Thank you so much! That’s very helpful!!

1 Like

You’re welcome, @Amelie1! :bowing_man: Glad that I could help! :webflow_heart:

I shall ask along then.

Weirdly when I try to adjust it for mobile devices, the same issue which I had with just one box (title not being inside the div) occurs with the majority of the boxes now. This results in the spacing between title and text to be completely off.

Same here though: in the navigator it says that the title was still inside the div. Do you have any ideas what I could do about that?

Thanks so much for your help so far!

Hi @Amelie1

Here’s a quick video that I hope helps resolve this for you! :slight_smile:

1 Like

Thank you @Brando !

Really appreciate that you and @rileyrichter took the effort to make a video about this.

Hope you have a nice day! :slight_smile:

1 Like

Glad to help @Amelie1 :smiley:

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