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…
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.
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?
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…)
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.
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?
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!