Blog header won't resize properly

Illdy
1

Hi,

I’m currently working on driveforfreedom.org and i’m having some issues with the Blog header not resizing properly on my computer.

Jumbotron works on computer but doesn’t resize on properly on mobile.

I tried using the below code in the WP CSS editor but no result.
#header-blog {
-webkit-background-size: contain !important;
-moz-background-size: contain !important;
-o-background-size: contain !important;
background-size: contain !important;
}

Thankful for any help on this matter.

2

Hello,

Can you please provide a couple of screenshots so I can better understand the malfunction?

It seems like you could use this CSS code:

#header{
-webkit-background-size: contain !important;
-moz-background-size: contain !important;
-o-background-size: contain !important;
background-size: contain !important;
background-position: center;
}

Let me know if the above fixed the header display.

Regards

3

Thanks,

I pasted that in the CSS editor but no difference at all. Attaching two screenshots, one of the first page and one of the blog page. The blog page header is a cropped version of the first page picture but it’s just as wide and should resize. As it is right now the blog header is too high i think.

//Johan

4

Hello,

Before anything else, go to Dashboard > Appearances > Customize > Blog header image and crop your header image.

I think I understand the issue, but the current display behaviour works for some pictures while not for others.

Try using this CSS code:

#header {
    width: 100%;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
}

Additionally, you should use this to handle the title spacing.

#header .bottom-header.blog {
    padding: 80px 0;
}

With this, you might discover that the mobile layouts are not working alright with the current padding or the contain property on the picture, so you should look into media queries.

Regards