2-column grid, 1 FR each, not resizing proportionally

Design help General
1

I have a 2-column grid, each column set to 1 FR, that size proportionately while the width of the viewport is higher than 1085px, but when it goes below that number the left column locks in size while the right continues to get smaller. Nothing in the left column is set to a specific width. I’ve spent a lot of time trying to figure out why the left column is “locking” at 1085 px width and I’m really at a loss.

Here’s a two-minute video that demonstrates the issue: Loom | Free Screen & Video Recording Software | Loom

I’m hoping someone might understand what’s causing this behavior and what I might need to do to correct it.

Thanks.

Here is my site Read-Only: *https://preview.webflow.com/preview/drumming-patterns?utm_medium=preview_link&utm_source=designer&utm_content=drumming-patterns&preview=3cd0bca9a14ce09d070530b8f8a5c1d6&mode=preview

2

Grid columns actually have two variables that are set when it comes to sizing, so using the “Default” option sets the minimum size to “auto” and the maximum size to your selected value—in this case, 1FR.

Once you add content, the “auto” minimum size will depend on the content within that column. In your case, the image is being prioritized as the browser shrinks, so to prevent that behavior, select the Min/Max option on the column sizing in the grid editor and give it a minimum size of 0:

image

Now when shrinking the browser window, each column will shrink equally and get as small as necessary to accommodate two equal columns.

If you’d prefer to have an image stop shrinking at a certain pixel value for example, just use that as the minimum size for that specific column :+1:

2 Likes
3

Thank you very much @mikeyevin, I really appreciate your help.

I never would have figured that out myself. (I know, because I just spent another 90 minutes trying!)

1 Like