Added a Header To Exact Specs Only To See It Double In Size

First figure out what size your image is exactly. Then go into your functions.php file and adjust the header image size to the same as your actual image. Then upload the image in WordPress and if you did it right the crop screen won’t show up. Then hit upload and that’s it.

It looks the exact same on both the image link and the site itself. Did you fix it, or does it still not look right on your end?

I just checked in multiple browsers on a Mac and it all looks the same for me.

The screenshot actually makes it look bigger than it appears on my screen, so you’ll probably want to disregard that since I’m not sure how it will appear on your browser. But your jpg link to the actual image itself is exactly the same size as your website…..so I’m not sure what’s going on with what you’re seeing.

Ok, yeah this is different than what you originally asked. If you’re trying to get your logo and widget area on the same line, you’ll need to adjust the widths of them both. Your title area and widget area exceed 100%…thats why it’s showing up like that. Change the width from 50% on the title area to a smaller width and there will be enough room for the widget area to fit.

Look around line 681 for this –

.header-image #title, 
.header-image #title a, 
.header-image #title-area {
    display: block;
    float: left;
    min-height: 120px;
    overflow: hidden;
    text-indent: -9999px;
    width: 300px;
}

Notice I changed it to 300px as an example. That will bring the widget area up. The widget area is around 65% and the title area is 50%….which exceeds 100%. Anytime that happens just decrease one or both to get them to fit on the same line.

You may want to trim your logo down if you want it to show up aligned with everything on the left. There’s extra spacing there which makes it look aligned right a little.

I’d be more than happy to help. Do you have a link?

Also, can you create a separate post on this?

If you’re talking about the space on the left of your logo, there is no space, that’s the way you designed your image. The space in your “logo” needs to be edited from the image itself.

Take a look – http://berkeycleanwater.com/test/wp-content/uploads/2013/08/Header21.jpg You need to edit this with whatever software you used to create and position it over to the left where you want it to show. This can’t be done from the code.

And to remove the space on the bottom, you can simply lower the min-height (from the same code as above). Try around 60px and adjust until it shows up the way you want.

I think what is happening is you’re looking at your homepage and seeing the image that you have in your slider, which is throwing everything off (visually). Take a look at your blog page, or any other page. I just recently posted this to your other thread, but I’ll repeat – Your logo should be in line with the edges of the content, and it is.

I know I already mentioned it, but you definitely need to trim the left of your logo first before you do anything else. Once you do that, then compare with your content and you’ll see everything is working as it should. Also be aware that the content and the header adjusts with the browser size. So look at your blog page and adjust the size and you’ll see everything is working perfectly. You just need to trim the image and fix the slider so its not positioned all the way to the left like it is. I think the image in the slider is making you think its not showing up right.

Let me know once you trim the image. Make sure to have the logo moved all the way to the left so there is no space.

You’re Welcome