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!
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.
I wanna make sure the space between each image remain the same when i zoom in and out. I need help with achieving that~
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.
Thank you so much!!! This is helpful.