When setting the header to 300px and adding an image of 300 pixels high, showing it full-size, the image is show in a much smaller size.
It helps a little to add
.logo, .logo a {
height: 100%;
width: 90%;
}
.html_header_top.html_logo_center .logo {
left: 60%;
}
To the css but doesn’t solve the problem entirely. Any advice?
PS this logo size bug has been around for a long time, it would be really great if that would finally be fixed in an upcoming version. Without any css fixes, a supposed centered imaged also isn’t centered.
Hey elvirais,
For desktop screens would you like your logo image to always be 300px high, allowing the over flow width to go off screen if needed, or would you like your width to always be 100% wide, allowing to height to be scaled down so the image is proportional?
I ask because your image is 1600px by 300px, so to maintain the 300px height we could allow to image to over flow off screen.
For tablets and mobile I assume you want your logo to be 100% wide? Would you consider a different logo for these screens that is cropped at your name to the bird? (Please see image in Private Content area.) this would allow the text in your image to be read easier at smaller screens.
As I look at your site now the logo image has some padding and is less than 100% wide, and this quick css would fix that:
.av-logo-container {
padding: 0px !important;
}
.logo,.logo a {
width: 100% !important;
}
But your answers to the questions above may change the css we will want to use.
Best regards,
Mike