Streaming live at 10am (PST)

Scaling flexbox issue


#1

Hey guys! New to Webflow so just trying to find my footing.

Basically I am trying to create this project link grid that I created in illustrator:

I need the max width of the grid to be 1380px, plus margins. If your browser window is larger than that 1380px and you scale the windows width below that, the entire grid scales down both in width AND height.

I kind of have it working once the browser width is scaled below the max grid width but before the browser width gets below that 1380px the height of the grid is effected by resizing the browser width.

Pretty much I need the ratio of the images to never change. The size of the grid (and by default the images within) should only scale uniformly, so the ratio and shape always stays the same.

Side Note
As you’ll see in the read only link I haven’t gotten to the stage of editing the grid to the more complex different sized grid in the above image. I thought I’d tackle getting the scaling right first.

As the grid I want to create doesn’t align to a strict consistent size and alignment structure. Any advice on the best way to go about this would be greatly appreciated. My intent was to just go crazy on negative margins, etc?

Thanks so much in advance for your help! Please let me know if I haven’t made any sense!



#2

I wanted to do this in Webflow for a long time :smiley:

How to control the ratio of your elements: http://css-square.webflow.io/


#3

Thanks so much for the reply @vincent. I totally wish this made sense to me. But this ratio thing just isn’t clicking with me! Is the idea to use this process to do each project tile? Or just the entire grid wrapper?


#4

It’s to addres the “my elements must keep the same ratio” part of your issue. So yes, maybe on each tiles. Tiles can be divs and images their background.


#5

Could you also do this by setting the height and width of a square to 50vh or 50vw?


#6

You’re right, very good question.

VW, VH, VMIN and VMAX (viewport units) are supported by Webflow and most browsers now, and my technique comes from a time when the support of those units was weaker. I tested your suggestion and it works really well.

From now on I’ll use your solution, it prevents to have to add an absolute div inside of the container. If I havecompatibility problems I’ll revert to the technique I described above.

Thanks!


#7

No problem!

I’ve been experimenting with using viewport units for text size – no success yet as it’s proving a little tricky, but I’ll be sure to post any results up here.


#8

Yes for text size it’s tricky because you can’t specify a minimum and maximum size, so it’s not always applicable. For some big titles it works sometimes.