Sizing issue with grid; kindly assist

Design help General
1

Hopefully someone can help me - I’m not a complete Webflow noob, but I can’t figure out how to recreate the logo overview in the 2nd and 3rd images. The first image (Cancer Council, etc.) is a screenshot of what I’ve put together in Weblfow. The 3 logos (ACRF, CC & HHMI) are showing at their true size; I would prefer to show them a bit smaller, as I have about 13 logos to display, and while these 3 logos are pretty much the same height, not all of the 13 logos will have the same height - some are an extra 10-20 pixels higher.

Note that I have placed my grid in a container, as I would like to control the overall width of the grid. And then I placed a div block inside each of the grid cells and then placed my image in the div block. On the container/grid/div block/image level I have played around with Max Width (both pixels and percentages), overflow, fit, as well as the FR and MinMax settings inside the grid, but I just can’t seem to figure it out.

I just want the logos to be contained in whatever width the container is set to (I know it’s 940 px initially, but I might end up making it larger than that), and have them be centred in relation to each other so that if I add other logos that are a fraction higher/less high, all the logos “line up” nicely horizontally, just like they do in the 2nd image below (“Trusted by thousands of companies around the world”). Hope that makes sense.

My read-only link is below and the page in question is the “Grid” page; if anyone can assist, that would be great. Thanks in advance.

Overlap
Overlap1065×226 45.2 KB

Multiple logos
Multiple logos1453×436 53.5 KB

Our Clients
Our Clients1418×418 62.3 KB

Here is my site Read-Only: https://preview.webflow.com/preview/dawson-lab-website?utm_medium=preview_link&utm_source=designer&utm_content=dawson-lab-website&preview=017e931f32b929ec0ce819a2cec35d01&pageId=5f916f5bd9c6cf51212b86af&mode=preview

2

Hey,

you should set a max-width: 100% on the images (both image front & image back) to get them to fit in their funding-wrappers. Then you set a max-width on the funding-wrapper, in my case I set them to 50% and it looks like this:

Screenshot_4
Screenshot_41365×349 39.4 KB

1 Like
3

Hi there, thanks for the super quick rep; much appreciated! I tried it from my end, and this indeed works. The only question I have left is why the HHMI logo is showing up so much larger in height than the ACRF and CC logos, given that the HHMI logo is the same height as the ACRF logo (179 pixels). (The CC logo is 178 pixels in height.)

Ideally, the HHMI logo would show similar height properties as the other 2 logos. What would be the best way to accomplish this?

Thanks a lot!

4

Ah,

you could add a “max-height” of a certain pixel value to get them all to be the same height. Just note that the width of the logos would fluctuate a bit when they all get the same height.

1 Like
5

Thanks, I will have a go at this tomorrow. Appreciate the quick responses! This helps me out a lot.

6

Sorry, I just had a quick go at this, but I still don’t understand why the HHMI logo is showing so much larger than the other 2 logos. The ACRF and HHMI logos are both 179 px high, and the CC logo is 178 pixels high; why won’t the HHMI logo display at a similar height as the other 2 logos? I don’t have to change or do anything with the Height or Max-Height settings for the first 2 logos and they are showing just fine. I’m confused…

Thanks