0

I just set up a WordPress site and have the same problem I have with all my other WordPress sites: The header image isn't responsive. It's 2,000 pixels wide regardless of how tiny the screen is.

I tried all kinds of fixes, from adding custom CSS to installing a special plugin, none of which worked.

I finally fixed it by choosing to not display a header image, then opening the file header.php and manually inserting a link to the image - style="width: 100%" - above the header.

It works perfectly, with two caveats.

The site title (in h1 tags) is now positioned below the header image, rather than over it. Also, this fix is for the home page only. I haven't yet figured out what I'm going to do for other pages, unless I elect to use a header image on the home page only.

So before I continue, I'd like to ask if there's a simple user-friendly way to make header images responsive.

EDIT

I just figured out how to make my original solution work.

First, go into your control panel and choose to NOT display a header image. Then manually insert an image in header.php, styling it to width: 100%. I placed mine inside a div with the class .divImgHeader.

The following code displays the header image on the home page only.

.divImgHeader { display: none; }
body.page-id-7 .divImgHeader {
    display: block;
}

However, the top of the image won't display, apparently because the now empty header is interfering with it. Simply use CSS to nix the header...

body.page-id-7 header#masthead {
    display: none;
}

The catch is that you won't have a menu on your home page. However, you might be able to fix the problem by applying display: none to elements other than the menu; I haven't tried that yet.

Another potential problem is that you might have to go back to square one and do it all over when you upgrade to the next WP version. But if you do, it should be a lot easier to fix the second time around. ;)

1

Okay so there is a lot going on with this header img. I also took all the junk out which I don't think you require for what you want. See if this helps, you can always add back in any you wish to keep by removing it from your css:

.has-header-image .custom-header-media img {
left: unset;
-o-object-fit: unset;
object-fit: unset;
-ms-transform: unset;
-moz-transform: unset;
-webkit-transform: unset;
translate: unset;
transform: unset;
top: unset;
-ms-transform: unset;
-moz-transform: unset;
-webkit-transform: unset;
transform: unset;
position: unset;
left: unset;
padding-bottom: unset;
-ms-transform: unset;
-moz-transform: unset;
-webkit-transform: unset;
transform: unset;

width: 100%;
height: auto;
min-width: 100%;
max-width:100%;
}

.has-header-image .custom-header {
display: block !important;
}
  • 1
    Wow, that's the most amazing piece of CSS I've ever seen. It works perfectly. – David Blomstrom Oct 30 '18 at 2:16
  • P.S. There are some "side effects," but I'll tweak it. ;) – David Blomstrom Oct 30 '18 at 2:36
  • I’m glad your now on the right track. I would advise using Google Chromes Inspector to look for problems and edits live for things like this, and then once you find the problem you can change what you need in your css to put the edits in place. It will make your whole developing experience a much happier one. – Dayley Oct 30 '18 at 2:44
1

CSS is the only answer here.

Two options: Make the header size change depending on screen size by setting the amount of pixels/percentage as its width/height. Or, the width = 100% as you mentioned.

I am unsure what your header is named in your theme, but assuming it is called header it would look like this in css:

.header img {
width: 100%;
}

If you prefer specific sizes for specific devices, then try something like this:

@media only screen and (max-width: 600px) {
.header img {
    width: 90%;
 }
}

This tells it that if the media screen size is up to 600px and nothing more, then change the images width to 90%.

You should try play with max and min widths too. You could also try playing about with pixels (although not so good with responsiveness, usually better for fixed sizes):

max-width: 95px;
min-width: 50%;

And as a LAST alternative if it is not doing as it’s told, then try:

width: 100% !important;

But it’s better to only do this to find out if one line of code is over-writing another. !important makes that line over-power any other with the same name. For example:

border: 2px solid blue;
border: 2px solid red !important;

Yup! Your border is going to be red. Because this line is more important.

Hope this helps!

  • Good tip about !important. Unfortunately, it looks like they've got this header image locked in somehow. I applied width: 100% !important to every div containing the image, as well as the header itself, then did it it again for the image (header + header img), but nothing works. – David Blomstrom Oct 29 '18 at 17:36
  • Actually, the image has the attribute width="2000" height="1200" so I guess that's the thing I can't override. – David Blomstrom Oct 29 '18 at 17:49
  • There is ALWAYS a way! ;) that’s the beauty of being a programmer/developer, the puzzle solving. Are you putting the “;” semicolons after you width:100% !important; ? – Dayley Oct 29 '18 at 17:54
  • Yes. I just tried it again, replacing width: 100% with max-width: 100%. – David Blomstrom Oct 29 '18 at 18:01
  • Try defining the image a little more in-depth. For example: in your css try .myhome .mycontainer .myheader img {width:100%;} so it is more specific to exactly which image you are referring to. Or it could be that the image is ALREADY 100%, but the container needs to be 100%. If you haven’t already, you should be trying to edit this image using Google Chromes Inspector (Or equivalent feature from other browsers) then you can see live what makes it change, and what doesn’t. Much easier and faster. – Dayley Oct 29 '18 at 18:05
1

Try this css, it works in Safari's Inspect Elements:

.has-header-image .custom-header-media img {
    width: 75%;
    min-width: 75%;
    max-width: 75%;
}
  • 1
    I think that's it. It isn't doing exactly what I want, but it's at least responding to the CSS, so I should be able to play around with it and make it work. – David Blomstrom Oct 29 '18 at 18:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.