Topic: Footer logo alignment issue in Grid block (uneven sizing + spacing)

YEAR93
June 22, 2026 at 12:17 am
Hi,

I’m running into an issue with a logo bar in my top footer.

I have three SVG logos placed inside a Grid block. All SVGs were exported at the same height, and I’m displaying them with width: auto; and height: 34px;.

However, the first logo appears visually smaller than the other logos, even though they all have the same height set in CSS.

The Grid block uses a horizontal spacing of 40px. What I’ve noticed is that the first logo also seems to receive an additional 40px left offset/padding, which affects the visual alignment and makes the logos appear inconsistent in size and spacing. The SVG canvas sizes appear correct, so I’m not sure where this extra space is coming from.

Is this expected behavior from the Grid block, and what would be the best way to ensure:
- All three SVG logos appear visually the same height.
- No additional spacing is applied to the first logo.
Thanks!
George
June 22, 2026 at 3:51 am
Hi,

Regarding the Grid block, this seems expected behavior.

I checked the spacing first: the first logo isn’t actually getting an extra 40px. The Grid in v1 blocks applies a 40px left padding to each column and then offsets the whole row by -40px to keep it flush, so the first logo sits exactly where it should. Both values are in place on your setup, so the row is aligned correctly.

On the heights — all three logos are in fact rendering at exactly 34px tall. The difference you’re seeing is optical, and it comes from the SVGs themselves rather than the CSS or the Grid. Each logo has a different amount of empty space inside its canvas (viewBox). The WordPress mark’s lettering sits in a tighter band within its canvas, so at the same 34px height its letters look smaller than the Shopify and Google marks, which fill more of their canvas. That built-in whitespace on the WordPress file is also what’s reading as a bit of extra space before the first logo.

Two ways to even them out:

The cleaner long-term fix is to re-export each SVG with the canvas trimmed tightly to the artwork (in your vector editor, fit the canvas/artboard to the artwork before exporting). That way all three glyphs fill their canvas the same way and a single height value matches across the board.

The quicker fix is to nudge the height per logo in CSS until they look even. The WordPress one reads small, so bumping it up a few pixels does it — for example:
```
.gb-image-fb2b1faf {
    height: 39px;
    width: auto;
}
```
Adjust that value to taste; matching logos by eye is always a bit of a judgment call rather than an exact number.
YEAR93
June 24, 2026 at 12:01 am
I took a different approach and removed the four logo containers (there are four now instead of three) from the Grid block. I placed them inside a flex container and added the following frontend CSS through the GenerateBlocks editor settings:
```
.gb-container-50bda37d {
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 60px;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
}
```
I also set all four child containers inside this flex container to width: fit-content;.

For the Image blocks, I used:
```
width: auto;
height: 34px;
vertical-align: middle;
```
and reduced the height to 26px on mobile.

This solved the spacing and sizing issues, and the logos now look much more consistent.

The only issue I’m still running into is that on mobile the four logos don’t stay on a single row. Is there a way to keep all four logos displayed side-by-side on mobile as well? Please see the attached screenshot.
George
June 24, 2026 at 2:19 am

Hello,

Yes, remove flex-wrap: wrap from .gb-container-50bda37d the container.
YEAR93
June 25, 2026 at 12:01 am

Perfect, that worked. Thanks!

One last thing I haven’t been able to solve. On mobile, it looks like the flex container isn’t centered properly. I’d like to horizontally center the flex container that contains the 4 inner containers, so there isn’t any extra space appearing on the far right side of the last container.

I’ve attached a screen recording 2 to show the issue more clearly. Do you have any suggestions on how to properly center this container on mobile?
George
June 25, 2026 at 3:01 am

Hello,

You can center align each logo container.
YEAR93
June 25, 2026 at 12:26 pm

Thanks for your suggestion. I found the issue was actually that the logo containers on mobile still had a width of 33.33% applied. I’ve now changed those containers to width: fit-content as well, and everything is evenly spaced as expected.

Thank you for your help!
George
June 26, 2026 at 4:52 am

Glad you found a solution, no problem!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.