Problem with grid layouts

Hi Everyone,
I am quite new to Webflow but loving it so far!

I can’t seem to understand why my layout is so different when I preview it, compared to when I see it in the designer…
It seems like there is something wrong with my grid…

Any help would be much appreciated!

https://preview.webflow.com/preview/main-website-583c99?utm_medium=preview_link&utm_source=dashboard&utm_content=main-website-583c99&preview=fcb4dfdd67c3ffb3ca00c752e7033594&mode=preview

H.


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

Hi @Henry_Unterreiner, welcome.

Your published webflow.io site is password protected so we can’t see what you describe. When sharing an issue that effects rendering it is beneficial to have info regarding viewports or images that can illustrate your issue.

Hi Henry,

I went through your project and tried giving your “Section 6” a width of 100vw and setting the overflow to “hidden”. I then previewed it on Google Chrome and it looks absolutely fine. The problem only seems to exist on Firefox. Have you checked it out on different browsers?

Cheers,
Aditya

Hi @webdev!

Sorry about this, I will post a screenshot of my issue.
Thanks for your help!

H.

Hi @aditya1,

I have tried to do the same as you by applying the same parameters on my section 6 but it still shows a layout wrong…
What’s interesting is that it doesn’t work on my computer on google chrome, but seems to work fine on Microsoft Edge (although it takes ages too load images…)

Below are the screenshots:

  1. WRONG (google chrome) layout

  2. CORRECT layout on Microsoft Edge, although very slow to load images)

@all, I have removed the password for the website, and my displays is set to 1920 x 1080

Thanks so much for your help,
H.

If the amount of images is not too much, I would suggest you use normal div blocks rather than the grid in case the grid’s being difficult. You could place a parent div with a width of 80% and max-width of 1200px. Set display to flex-box horizontal, place two 50% width 100% height divs inside it and put your images inside them. Maybe it would be less complicated and would work perfectly on any browser. Also takes mere minutes to make responsive. I would be glad to help more if you choose to go with this approach.

1 Like

Hi Aditya1, sounds like a much simpler solution. The reason why I am using this fine grid is to enable a "random distribution of images along the page.

Sometimes, images stack horizontally, sometimes vertically…

Would your solution still work with this"random" distribution?

H.

I believe yes, it should work. You can set the height of the main parent div to auto, and you’d have to manually size the divs inside that contain the images. But I believe it would’ve been the same even in case of a grid, you’d have to size the image/image containers manually. As long as you’re having a limited (6-10) amount of images, I think this would be the best approach. From my perspective, I think I would need barely 5 minutes to re-create the homepage of https://www.thecollectivea.com/ with those images using my method, and another 5 to make it responsive. Let me know if you go for this approach and require any help!

Hi Aditya1, thanks for the message! Sounds like you are really on top of the web design game =)
Yes, I’d love to learn from you if possible!

H.

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