Hey,
I’m wondering how I could design a div block that stays as a square by resizing the browser ? The width has to be 33.333% but the height?! background: I want to design a grid system without the columns (want to integrate a filter).
Hopefully there is an answer!
Thank you very much!
Robin
Oh I knew how to do this prior to Webflow, I just tried in Webflow and it works. I know 3 solutions. You can use an image as a placeholder in your block, images retain ratio. But there are 2 solution without images. The first one doesn’t give you much possibility to put content in the square, the other one does but requires a bit of custom code so it’s not showing in the designer, buton publish. Here are those 2 solutions:
Yeah thats looks good! But I need with content. So I think it would be the second solution (: I just have to put the code in the custom code area of the dashboard?
The solution with placeholder image doesn’t allow content or hover effects right ?
I updated my page, because the same content solution can be applied to the first example… and works in designer. And no custom code. So I’d say use and abuse of solution 1 !
It would, in the same way the two other solution do: in a div placed with absolute, so over it. But really use my n°1 solution on my example page (:
Awesome! I’m going to try it! And I just have to put this code in the custom code area right?
NO! 
The number one solution is PURELY made in Webflow, NO CUSTOM CODE!
See:
http://vincent.polenordstudio.fr/snap/o1umk.jpg
Structure:
http://vincent.polenordstudio.fr/snap/ruluu.jpg
You can even ditch the inner div.
haha ok! Perfect! I’m going to try it immediately 
I updated the page with a centered grid made of squares. Had to use several sections.
Looks good! I’m working on mine too. I think the issue is till now just the content and the scale of the content.
I think there isn’t a solution for what I want to achieve…Since I want to implement also a filter function, I need to have the divs in one section. Problem is: when all the divs are in the same section, scrolling does not work in the browser
https://preview.webflow.com/preview/elastic-square-test?preview=9a3c544a802ce45a849be6ab7caaa7d7
Thats what I’m working on
You gave overflow:hidden to the body wich prevents the site to scroll
oh no!!! You’re right 
@vincent maybe it’s a stupid question. But can you tell me how I create a global class? Or what are the differences between a global and and combo class ?
Hmm not sure what you want to know exactly. I often quote the following:
http://forum.webflow.com/t/details-about-recent-class-selector-user-interface-changes/18483
Tell me if you find your answer there.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.