Need urgent help with layout!

Hey guysssss
So when I decrease my website browser size, things start to overlap each other and get all messed up. I have no idea why is doing that, please help me!


Here is my site Read-Only: [https://preview.webflow.com/preview/willity?utm_source=willity&preview=ea508cf6c2301c77b7158c48a7aeb77d
(how to share your site Read-Only link)

@Willity
Please post screenshots and update your query with exactally what you want to accomplish and where.


Thanks for replying! So when I make the browser window smaller, pictures start to overlap each other.

1 Like

I wanna make sure the space between each image remain the same when i zoom in and out. I need help with achieving that~

@Willity

You need to put those images in a new grid component.

BODY → dleete all grid and margins

  • make new Div Block = Grid
    – Grid 5 Columns
    — Column 1 = left margin (eg 3vw)
    — Column 2 = 1fr
    — Column 3 = middle margin (eg 3vw)
    — Column 4 = 1fr
    — Column 5 = right margin (ed 3vw)
    – Grid XX Rows
    — Every ODD row = Margin (eg 3vw)
    — Every Row Row contains your contents on column 2 and 4

(!) Put a DIV BLOCK in the grid cells then the content in that div block.Customize flex/margin/padding of your cell div block to your liking.

This will maintain width integrity without overlapping.

1 Like

Thank you so much!!! This is helpful.