Grid not honoring FR settings at lower breakpoints

I’m trying to recreate an old website of mine in Webflow using Grid, but experiencing unexpected behvavoir in lower breakpoints, as the grid stops honoring the FR settings and the grid starts getting cropped off from the right hand side.

I recorded a two-minute video that demonstrates this behavior: https://www.loom.com/share/296694c0a15d42bc9dea38f34064dd80

Does anyone have an idea what is causing this behavior?

Thanks.


Here is my site Read-Only: https://preview.webflow.com/preview/nymm-2?utm_source=nymm-2&preview=3def8ecb6e85abad358ae527eff5aee2

Hi Chuck

Set the logo as background image. set it to “cover”.

https://www.loom.com/share/704a3ab163714ad8bbe289acfbd927e5

Thanks, @shokoaviv,

Actually, I don’t think it’s setting it to “cover” that’s the solution, but just viewing it in Preview. See below. It seems to be a bug in the Designer. Kind of confusing to me why it affects the logo graphic differently than the type graphics (“New York Multipmedia” and “Integrated Design,” which are also SVGs, just like the logo) to the right.

Set the logo to background image and change the height to px then enter ‘auto’. see the loom

https://www.loom.com/share/af2f75b501d44562bfc8572e3eb5651f

Thanks for your patience with me, @shokoaviv,

You have quite a sophisticated understanding of Webflow to advise such specific sequence of things that are not at all intuitive to me—I’m not comprehending at all the “why.” Why is the logo SVG on the left behaving differently than the other SVGs on the right, why the need for a background image, and now, why the need to change from Auto to pixels and then back again? None of this seems logical to me, but I’m really impressed that you must understand something that’s going on behind the scenes in Webflow.

For some reason, though, I’ve followed your latest steps, but can’t seem to duplicate your results:

I’m not so good in webflow. and I can not explain the logic behind the scene. Once I red something about changing the parameter so I thought to try it in your case, and it worked for me. I did try it again and it is working. Attach the loom (again).

https://www.loom.com/share/6f3adc31120f4c80a12b8ec9fa426b07

Thanks very much @shakoaviv for taking the time to help me with this. You’re definitely better at Webflow than me.

For some reason I follow your steps but it doesn’t duplicate your results.

I would be great if someone from the Webflow team has some idea what is going on and could explain it. The behavior problem is only in the display in the designer. There’s no behavior problem, even in the original without doing any workaround steps, once it’s published.

Have you taken the time to review the great videos about using the grid in webflow? If you have not, I highly recommend so. There is also a video about building a site using grid. The footer part of that tutorial is relevant.

Thanks @webdev,

Yes, I’ve viewed both of those tutorials twice. They are excellent, but I don’t believe that they address the issue here.

I believe this is what you want right?

https://cl.ly/a47cb8094199

Your logo is an inline block element. I placed it into the div (block level element).

@webdev,

I believe I just followed your procedure, but did not get the different results as you did. However, I may have found a lead as to a seeming anomaly that may be related to the problem I’m experiencing. Please let me know what you think. Thanks.

An addendum:

Close the project in the designer and then open it again, to see if the issue on your end persists.

If it does, provide your full browser name, version, and which OS you are on.

The behavior I get is what I recorded, with you having added the logo as a child to the unstyled div which is set to grid col 1, row 1.

The first child of the grid cell is displayed with a red border (handle) and indicated with the icon in the navigator.

https://cl.ly/ad84411fae2e

I am off to the woodshop to make a chair. Back much later.

1 Like

@webdev,

Closed and reopened the project, and also closed and updated the browser, which is Chrome. Problem persists. However, opened the project in both Safari and Firefox and no problem. So this whole issue is caused by using Webflow on Chrome on the Mac. Here are the stats:

Google Chrome
Version 74.0.3729.108

macOS Mojave
Version 10.14.4
MacBook Pro (15-inch, 2016)

So, something for the Webflow team to look into. Do you know if they will see this thread, or is there someone I need to contact to bring this to their attention?

Too bad about not being able to work in Chrome, because Firefox is not fully supported, and when I work in Webflow in Safari I get persistent notifications saying the tab is using significant system resources and suggesting that I close it, which can be an irritation.

Looks like the word holder divs are causing the problem. Probably because you have an image with negative vw margin inside. Seems to confuse the browser. You don’t the world holders anyway. The grid is your world holder. If you remove them everything should work fine. Works fine on Chrome on Mac too.

Hope that helps!

Thank you, @Ali_Abbas, please see below:

Hey Chuck my pleasure. I’m not able to reproduce the issue of the integrated design corners not snapping into its cell. I’m on Chrome on a Mac as well. Have you updated to the latest version of Chrome? Can you try this on Chrome on another computer? Maybe try clearing your Chrome cache and cookies for Webflow and try again. Or restart your computer.

Since I’m using the same browser and system as you I should be able to see the same bug but I don’t, so this might be isolated to your browser. Also make sure Chrome is at 100% zoom. Sometimes zooming the UI in or out causes issues.

1 Like

@Ali_Abbas, you solved it!

I tried Webflow on Chrome on a 2nd laptop I own and it behaved predictably, so I uninstalled and reinstalled it on my main laptop and the problem is finally gone.

I never would have guessed that it was an issue with the particular installation of the browser on a particular machine, so I really appreciate your suggesting looking in that direction.

2 Likes