Grid-based Home Page - Not Responsive

Design help General
1

Hello,

Please see my home page, I designed it originally on my 27 in Mac, looked great but oversized on my 15 in MacBook. so I fixed in my MacBook, now the grids are overlapping. I restored it on my original one because it looked the least offensive on both screens.

How can I design a grid that is responsive to screen and browser window sizes?

https://preview.webflow.com/preview/woodnote-designs?utm_source=woodnote-designs&preview=87d952952fc641ad2f6397027e07493c

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Looks great to me! Did you figure it out?

1 Like
3

thank you! but no I haven’t figured it out. What screen are you using? the grid is off my container when using a smaller screen. (screenshot attached)

31%20PM
31%20PM1921×1113 775 KB

And when I use 1 FR columns the design just breaks apart as you resize the screen. So right now they are currently back to 65 px grid.

4

I think thats because you have 21 columns which the minimum size of each is being reached so it stretches out to the right. I’m still learning grid so I’m not sure I can help more specifically. Maybe change the amount of columns to 10 or so?

5

Yeah you’re right as to why it’s stretching. what I can also do is adjust the margins so even if I have fewer columns I can do my overlaps the way I want it. but I still have to test in different screens to see how it reacts. I was looking for a more concrete logic as to how I can anticipate the elements to behave in a grid so I don’t have to waste time testing.

6

This might help CSS grid in Webflow | Webflow University

7

i fixed it! Used fewer columns, retained my 65x65 px rows and used children alignment and margins to create the overlaps.