[Support request] Left / Right Margin of 3 Logos in the Header?

[Armin]

Hi,

after you figured out how to fit 3 Logos in the header with a subtext under the second one, would you help me find out how to give the 3 Logos in a row in the header a centered position, so that the left and the right margin’s is the same at desktop view?

Actually the right one stays on the right border of the browser windows, while the left one has a margin to the left border.

Thank you very much!

[Leo]

Hi there,

I don’t believe there is a good way to handle this.

You can see that both logos have margins on a bigger screen:
https://www.screencast.com/t/NpTgJWXgnG

The issue only happens when the screen is a bit small.

You could try this CSS:

.header-section-1 {
    margin-left: 30px;
}
.header-section-3 {
    margin-right: 30px;
}

[Armin]

Thank you very much, Leo 🙂

It works, but the left logo is more centered than the right one.

I thought about putting all 3 Logos in a container inside the header. The container remains in the center of the screen, and self-floats the 3 columns according to the screen size.

Any idea to get this?

Best Regards,

Armin

[Leo]

I think the main issue here is that all three logos have different widths so it’s not really possible for all of them to have even spacing.

Would you be able to tweak the images so all three logos have the same width?

It should work a lot better.

[Author]

Posts