[Website fix] Fix inconsistent sizing and alignment of member logos on MP.io

[aeiras]

@rstjames , hey Triber,

Today during the MP community call, we noticed that Member and guest logos are inconsistently sized and misaligned. Some logos appear significantly larger (e.g., AJUG, Garden State JUG), while others are too small or have excessive whitespace. The overall grid lacks visual balance and consistency. Thank you for prioritizing this task!

1- landing page: https://microprofile.io

2 - WG page: https://microprofile.io/workinggroup/

Problem

1. Logos are rendered at inconsistent visual weights.
2. Some logos exceed the intended visual hierarchy and dominate the layout.
3. Guest member logos are not aligned consistently with standard members.
4. Excessive whitespace and varying aspect ratios create a fragmented presentation.

Expected Behavior

1. All logos should appear visually balanced regardless of original aspect ratio.
2. Logos should align consistently within a uniform grid.
3. No logo should visually dominate others due to scaling differences.
4. Guest member logos should follow the same sizing logic
5. Responsive behavior must maintain alignment and proportional scaling.

Fix
Standardize logo dimensions
Use consistent max-height
Apply object-fit
Normalize vertical alignment
Remove inconsistent inline sizing
Ensure grid uses consistent spacing
Validate across desktop, tablet, and mobile

---

[rstjames]

Yes, this was on my list todo. This adjusted when we removed members. Not sure why...

I got the desktop to look better, but I am having some issues with the mobile version. I will continue to try to improve mobile.

@aeiras

[aeiras]

@rstjames, thanks for promptly working on this.

in the website it looks better, yet AJUG is still off while Ostfalia, Microsoft, & Tomitribe looks too small. sizing inconsistency prevails.

checking iPhone, it looks not aligned as it should, same with iPad. there issue with the grid also prevails. I recommend formally spacing each logo across and make it a standard (dimension) so future logo changes don't mess up alignment.

[rstjames]

ok, but as I mentioned, it has been fixed on the desktop and still needs to be worked on on tablet and mobile.
Responsive sizing is complicated. I will keep this ticket updated when tablet and mobile improve.

Desktop: This is as good as it will get unless we want to start to do custom CSS.

@aeiras

[aeiras]

gotcha on work in progress with the other tools.

"Desktop: This is as good as it will get unless we want to start to do custom CSS." - Are you saying that forcing the alignment behavior would require writing code rather than relying on the theme’s built-in settings?

---

Lastly: Can you confirm whether the logos on the two locations are driven by the same source/component? If we update them in one place, will the changes automatically propagate to the other location, or do they need to be updated separately?

[rstjames]

@aeiras
Lastly: Can you confirm whether the logos on the two locations are driven by the same source/component? If we update them in one place, will the changes automatically propagate to the other location, or do they need to be updated separately?

Good question. Unforunatly it is not. When updated in one spot it must be updated in the other. Since there is only two locations, the overhead of updating is not high.

What I do to save time is I fix/change "one section" that might be found on other pages, save it as a template, then I can apply that template to other pages (so like a copy and paste) to save time and keep consistency

Unfortunately, the sizing issue seems to be a bug in the theme's styling. So I had to size each logo manually.

[aeiras]

thanks for the response, Triber.
Your fix-approach sounds sensible. Please, let's keep an eye for when greater effort increases the manual workload.

---

Please update us with any progress on the mobile/iPad, etc as you work on those improvements.