Right now, your code is saying the image height must not be more than 400px. The image is only 200px so the code isn’t changing anything.
If you want to stretch the image height to be 400px you could do this:
.site-title a img {
height: 400px;
}
Thank you for the response joelymil.
I have tested with both the 400px height image and 200px height. If you visit the site again, you will see the image is now 50% width and still 200px high. This is with an image of 1380×400. The previous image that covered the proper full length was 1380×200.
Sorry if this is common space. I just do not understand why when the height is larger, the width compresses.
I have an option with the theme under Appearances –> Theme Options –> Style -> “Header Logo Image Max-height” which the maximum selectable number is 200px. Next to it, “Your logo image should have the double height of this to be high resolution”
I have added your code to my child-theme which still edid not produce the results desired.
Thank you again for the help.
Update:
I just uploaded a picture with 2760x400px. This filled the entire space. Now the only thing I’d like to do is still increase the maximum height from 200px. It throws off the image proportions to much for what I am trying to accomplish.
That is a rough picture for now just to get the functionality of what i’m looking for. A new picture to frame in the body will be coming soon with a sunny day to photograph it.
I also uploaded a 2760×800 image, which than shrunk back down to 50%.
Ok, after a bit of digging, I think the issue is basically that the “200px” setting in your Theme Options loads after your child theme style.css. You can still make your CSS take precedence, though, by using a more “specific” selector.
It looks like the Theme Option setting is using this:
.site-title a img {
max-height: 200px;
}
This is already a fairly specific selector, but to make your selector more specific you should be able to use this:
h1.site-title a img {
max-height: 400px;
}
If for some reason this still doesn’t work do this:
h1.site-title a img {
max-height: 400px !important;
}
When all else fails, !important will give its declaration precedence regardless of selector, but it’s not great coding practice so it’s kind of a last resort.
Also, now that you’re using an image with a height of at least 400px, you can get rid of the height: 400px; declaration I suggested earlier.
joleymil… Thank You.
I appreciate you taking the time to dig further into this for me and explaining in a understandable way. It was driving me crazy and your knowledge and input is a blessing.
I did not have to use the !important. I used the more specific selector and it was exactly what I’m looking for.
Thank you again,
James
Resolved that issue but now another has arisen after marking resolved. Shall I open another thread or keep it in here?
Somehow there is mismatched coding for different pages. On the “Blog” & “Home” page, the coding you provided works perfect. The remainder of my pages, go untouched. If you click on “Blog” and then on “Contests” the difference can be seen.
What would cause something in style.css to only effect a couple pages and not the entire site?
The only correlation between the “Blog” and “Home” is that the home page is set as a static page and then the posts page is the blog.
Ok, for some reason, all the pages except “Home” and “Blog” have your image nested in a <p> element instead of an <h1>. Strange.
Two possible fixes:
- Remove the
<h1> from the previous CSS rule and use !important
.site-title a img {
max-height: 328px !important;
}
- Keep the old rule and add a second that selects the
<p>:
p.site-title a img {
max-height: 328px;
}
Personally, I’d go with the first option, for the sake of one rule that styles everything. Sorry about the mix up! This was an unusual case.
Just wanted to say one last time… Thank You!
Site is up and working great your above suggestions.
Still trying to figure out IE8 issues but the banner was bugging me for days.
Your help was and is much appreciated.
You’re welcome! Glad to hear.
