Problem with header image size

Greetings,

I have problem with header image, she is not displayed correctly. Recommendation size is 1920x600 pixels.

My Settings:

Header height [default: 300px] in Customize section. But when I reduced height of image on 300px still won’t works properly.

In Custom CSS I have this code:

.header-image {
height: 200px;
}

When I change or delete code, picture is still not good.

My URL of site is: http://bakterija.atspace.cc/.

How to resolve this problem?

Thank you,
Nikola

Hi,

Can you, please clarify what is the exact issue with the image? I can’t see any issue with it, it’s there and it has the set 200px height and it shows up well in that height.

Best Regards,
Csaba

On my PC screen picture is zoomed, but on my mobile it is fine.

May I sent you a screenshot?

Nikola

Hi,

Yes, please send me a link to the screenshots from your PC and you smartphone.

Best Regards,
Csaba

Here are links:

Link from my PC is zoomed:

Picture from my smartphone is not zoomed, normal:

Nikola

Hi,

You can make the image to be the full-size ( to show the header inner image instead of the background image which crops ) with this Custom CSS:

.header-inner {
    display: block !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

That was helpful advice, but I made some changes:

.header-inner {
display: block !important;
height: 300px;
}

.header-image {
height: 300px;
}

But, now I have problem with mobile screen view. Picture is to streched. How to change mobile view with CSS?

Thank you for your time,
Nikola

Hi,

You can make your CSS to apply for mobile screensizes, then you can use it like this:

@media only screen and (max-width: 768px) {
.header-inner {
display: block !important;
height: 300px;
}

.header-image {
height: 300px;
}
}
  • just change the height values to new ones ( which you want to apply to the mobile screen-size ).

Please let me know how it works.

Best Regards,
Csaba

Hi,

I tried with your code but it wont work. Picture is still with too much pixels at height on mobile. When I put 200px or 100px there is no change. Please help.

Nikola

Hi,

That’s your CSS, I’ve just modified it to make it work only for mobile screen-sizes, but anyway that’s not a good idea to set a fixed size to header image size, since the image is single-image and full-width, the image will be distorted if you use a pre-set size, but the above Custom CSS I gave you must work if you apply it correctly to the Additional CSS field or using a Custom CSS plugin and also try to add it to the first line.

Best Regards,
Csaba

I tried to add to the first line already.

The recommendation picture size for header image is 1920x600. I need 1920x300. Note that when I put 1920x600 picture in header it look like normal on smartphone, on 1024x768 screen but not at 1920x1080 here is zoomed only.

Why is that? Any theme problem? How to solve this problem, to be a good solution without distortion of image?

Sorry for wasting your time, but I’m struggling with header picture few days from now.
Thank you for that,
Nikola

Hi,

The desktop zooming haven’t been resolved with the Custom CSS I gave you?

On mobiles unfortunately you can’t change the height without distortion, so you must keep the original size there.

Best Regards,
Csaba

Sort of. Code can fix large screen, but is breaking a small screen resolution. Obviously there is no code for fixing that.

May be any other resolution of picture or something like that?

I’m so sad about it.

Thank you a lot,
Nikola

Hi,

Unfortunately that’s not possible anyway, that’s impossible to have the full-width single-image image with fixed px height and to don’t be stretched ( impossible ).

Best Regards,
Csaba