Big Header Issue

I can’t figure it out either. There must be something added somewhere in the css that is preventing it from adjusting like it’s supposed to, but I can’t see where it’s coming from.

I can get the main part of the logo to resize and look good and centered on mobile browsers when I check, but I can’t seem to get the entire logo to show up perfectly. It cuts the side of it off.

Anyone else out there mind helping us out? Hopefully someone can see what I’m missing.

@theapril Try changing the title-area width to a percentage. Example (line 4522) –

.title-area {
	float: left;
	padding: 0;
	padding: 0;
	width: 100%;
}

At the moment, the title area is set to a fixed width around 825px which is the cause of the image not resizing and being cut off.

I would also remove the margin-left that was added on 4531 so that the image will center when viewed on mobile devices or when the browser is resized –

.header-image .title-area {
    padding: 0;
    margin-left: -45px;
}

You can change the widget area width to auto on line 4050 –

.site-header .widget-area {
    width: auto;
}

Since your logo is large, you would have to make some changes to the responsive section of the css to have certain parts kick in at certain sizes/browser widths. If you want me to login for you and add all of this in I can, just let me know.

Ok I just got it fixed by adding in some of the code suggestions mentioned above. The only other thing I would recommend doing is removing the extra transparent space on the left side of the logo image (using photoshop or whichever program you use). The image centers perfectly when viewed on mobile browsers, but since there is some space on the left side (inside the image itself) it visually looks as if the image isn’t centered. So once you cut that part out then it will appear centered.

Also, I noticed a couple CSS errors in the code that you may want to look out for in the future. I went ahead and corrected them, but near the end of the file I saw one spot that had too many brackets, and another was missing a bracket.

I just checked your site on an iPad and it looks good! Let me know how everything looks from your end.