Streaming live at 10am (PST)

Responsive Grid on published site is broken (depending on browser window size)


#1

Hi Everyone,

Here is my public share link: https://preview.webflow.com/preview/draft-4?preview=eaa2ab07504c2c12252430db7c53e167

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.

Thank you!


#2

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:

https://preview.webflow.com/preview/draft-6?preview=eaa2ab07504c2c12252430db7c53e167


#3

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.


#4

Thanks Vincent - for your help.

I have uploaded smaller images:

https://preview.webflow.com/preview/draft-4?preview=eaa2ab07504c2c12252430db7c53e167

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 appreciate your help. Thanks again!


#5

I thought I fixed the problem but apparently I didn't. I would greatly appreciate your help. Here is my preview link: https://preview.webflow.com/preview/draft-6?preview=eaa2ab07504c2c12252430db7c53e167

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.

And on firefox - it's all messed up..

See attached screenshots.

Thank you so much!

Desktop

Tablet

Firefox Desktop


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.