XF 2.2 Can't increase width of logo

[Splinter]

I have a logo of 1179x489 that I'm trying to make full width but it stays at 361 width, so I'm probably missing something.
I have this code in extra.less
.p-header-logo.p-header-logo--image img {
max-width: 1179px !important;
max-height: 150px !important;
}
I also the Nulumia add on and in header and navigation, 1179px is also checked. Max width 100% doesn't change the logo width to max.
Site is:
www.baexpats.online
Thanks

 

[bzcomputers]

With those settings your image is hitting it's max-height setting and maxing out. You will never get a width larger than 362px with max-height set to 150px, with an image that is 1179x489. Remember your image will keep the same width:height ratio.

You can use: max-height: unset; to get the full width of the image.

This large of a logo is not typical, and will take up a large amount of screen real estate especially on mobile devices which is the majority of site visitors these days.

 

[Splinter]

It doesn't have to be 150px height and surely a logo width as per the attached is fairly common isn't it?
To fit in the red border.

 

[Paul B]

If you make that image fit the width it will be badly distorted unless the height increases propertionally.



If you keep the ratio then the image will take over most of the vertical space in the viewport.



Use an image which is three to four times as wide as it is high to make it fit the space better - a panoramic or stitched image would work.

 

[Splinter]

You're right - it's probably the only way, a bit like when I did my YouTube banner.
Stretching it out of ratio looks bad, so it's a case of either finding one I can crop whilst retaining what I need or use a panoramic one that I already have.
Cheers.