I am working on this project and I want this responsive mosaic style grid that is 4 columns in desktop, 3 in iPad, 2 in phone landscape, and 1 in phone portrait.
I have only worked on the desktop version thus far.
Everything looks good on Webflow but the grid is messed up in the following instances (screenshots attached):
Chrome (fine on desktop but if I make browser smaller - the grid is broken)
Firefox (most messed up)
Safari
And I made sure to have NO CLEARS so that the mosaic grid is possible.
I am unsure what’s going on. It seems like it would be something really easy to accomplish but I am running into a lot of trouble.
I don’t really know what I did but I believe I fixed the issue. I set the link blocks to inline blocks and some are floated, some are not and it seems to be doing okay thus far:
You site is extremely slow in the designer, this is because your images have HUGE dimensions, up to 8000px… You should reduce them to the size they’re used for, a few pixels only.
Now for your issue, your design layout is not consistent enev within the desktop breakpoint, but it’svery hard to show you how because of the size of all the images. if you make smaller images and replace them I’ll show you.
I managed to make things work (I think) in another draft but would love to see what you do to get the grid to work so I can learn from it and see the logic behind it.
I thought I fixed the problem but apparently I didn’t. I would greatly appreciate your help. Here is my preview link: Webflow - Draft 6
Tonight, while uploading some lower-resolution thumbnails, the grid broThe grid is fine on desktop on all breakpoints, but the grid gets broken on iPad view at 768px. It’s fine between 767px and 991px.
