Bottom of header image cut off in desktop view.

Q: are you logged in as admin and seeing the admin bar at the top of the site? Have you tried logging out or using an alternate browser to view the site as a visitor will see it? Just curious…

I’ve already tried looking at it with different browsers; it’s the same for all the ones I’ve tried.

I was logged in as an admin. I just tried logging out–no change.

Here is how I see your page in Firefox and Safari (on Mac):

And here it is in Chrome:

If I set the screen size in Firefox to 800×1280 the white border below the header image is missing, at 768×1024 it reappears.

The trouble is within this CSS:

@media (min-width: 320px) and (max-width: 359px ) {
.site-header {
height: 80px;
}
}
@media (min-width: 360px) and (max-width: 767px ) {
.site-header {
height: 190px;
}
}
@media (min-width: 768px) and (max-width: 979px ) {
.site-header {
height: 192px;
}
}
@media (min-width: 980px) and (max-width: 1279px ){
.site-header {
height: 360px;
}
}
@media (min-width: 1280px) and (max-width: 1365px ){
.site-header {
height: 320px;
}
}
@media (min-width: 1366px) and (max-width: 1439px ){
.site-header {
height: 341px;
}
}
@media (min-width: 1440px) and (max-width: 1599px ) {
.site-header {
height: 360px;
}
}
@media (min-width: 1600px) and (max-width: 1919px ) {
.site-header {
height: 400px;
}
}
@media (min-width: 1920px) and (max-width: 2559px ) {
.site-header {
height: 480px;
}
}
@media (min-width: 2560px)  and (max-width: 2879px ) {
.site-header {
height: 640px;
}
}
@media (min-width: 2880px) {
.site-header {
height: 720px;
}
}

As of now, when you are shrinking the width of your browser window different heights will be used depending on your browser window size.
So if you overwrite this code:

@media (min-width: 768px) and (max-width: 979px ) {
.site-header {
height: 192px;
}
}

with

@media (min-width: 768px) and (max-width: 979px ) {
.site-header {
    height: 240px;
}
}

by just adding it to your CSS customization, you should get your border back for 800px wide screens.

Hope this helps a little bit.

Lille Ulven

Thanks! I can’t seem to find the code you’re referring to though. I’ve searched through my style.css (and all my theme files, actually) and I can’t seem to find any code matching what you posted. “192” doesn’t appear anywhere in there. Am I missing something?

You can find that code if you open the webdeveloper tools for example in firefox and then point to your header. In the right part of the webdeveloper tools you should see the css and should be able to scroll down to one of these settings depending on which screen size you are using.

It is actually included in the custom-header.php file, but you can overwrite the information by changing the CSS code in “Customize -> CSS”.

Hope this helps.

Lille Ulven

I figured out why I couldn’t find the code you were referring to. It seems that my website’s code is different from the code generated in the developer tools. My site has its minimum and maximum width values defined by percents, not pixel values like you’re seeing.

I did figure out a fix. For anyone trying to solve a similar problem in the future, I added the following code to my “Additional CSS” section:

.site-header{
border-bottom: solid white 9px;
}