Logo/Header Shrinking on Upload to Customize.php

[nd984]

I just updated to version 4+ and enabled all new plugins. It required that I re-upload a new logo, and I did this via customize.php.

The file I uploaded was 940 x 98 pixels, and prior to the update this logo stretched across the header width perfectly, using the CSS update below. However, now when I upload a logo through customize.php it *shrinks* the logo to ~80 pix wide. When I click “Save and Publish” it refreshes and shows the image header correctly, but when you refresh the page it shrinks the logo. In the live version the logo shows small always. Is this a bug? Nothing I can find in the CSS has allowed me to change the logo so that it displays properly.

Here is the CSS I was/am using in a child theme under “custom.css”. Turning it on/off has no effect on the image upload sizing problem.

#branding #header_content {
	padding: 15px 0px 10px 0px; /*padding for header logo, need 0px left and right*/
	position: relative;
}

Please help!

Topic

[Jason Bobich]

Hello,

After the the padding of your #header_content DIV, you’ve got 900px to work with for the logo.

So, if you remove the padding around that, like you’ve done, you should now have 940px to work with. Can I see a link to where you’ve inputted the 940px logo image and your CSS customization?

[nd984]

The custom.css file is included below. I have linked a blank version of the header logo we’re using (same pixel dimensions, same failures). http://postimg.org/image/gd9ccjnlv/

Also, I just noticed that when the site is viewed on a mobile device (iPhone) the logo reverts to the “Barely Corporate” design.

The client is pretty frustrated, but I’m still trying to figure out what’s going wrong. Thanks in advance for any help.

/* Put your custom CSS in this file. */

/*_____________header content____________*/
#top {
	background-color: #00457c; /* #eaf2f5 set header bg color here This will override theme options */
}
#branding #header_content {
	padding: 15px 0px 10px 0px; /*padding for header logo, need 0px left and right*/
	position: relative;
}
#top #branding {
	border-bottom: 4px solid #ffffff; /*line btwn header and body*/
        background: none /*Default theme has header glow, remove here*/
}
/*header menu tabs*/
#access li a {
	font-size: 13px; /*font size of header menu items*/
	font-weight: bold;
	line-height: 12px; /*spacing of header, need to keep at 12px for alignment*/
}

/*text in body and also for page hooks*/
body, input, textarea {
	color: #202020; 
}

#featured {
        background-image:url(http://dental-vmweb01.inetuhosted.net/wordpress/wp-content/uploads/2012/06/page_gradient.png);
        background-repeat:repeat-x;
        background-color:#dbe3f5;
}

#main {
	padding: 15px 0; /*pad between header and main content*/	
        background: #d0dae4;
        background-image:url(http://dental-vmweb01.inetuhosted.net/wordpress/wp-content/uploads/2012/06/tall.jpg);
        background-repeat:repeat-x;
}

.current_page_item a {
	background: #dbeaf9;
        font-size:14px; 
        font-weight: bold;
}

body
{
        background-color: #eef1f6; 
}

/* Breadcrumbs */
#main #breadcrumbs {
	margin-bottom: 4px;
	padding: 0px;
}
#main #breadcrumbs a {
	border-bottom: 1px dotted #e5e5e5;
	color: #c0c0c0;
}
#main #breadcrumbs .current {
	padding: 0 4px;
	color: #c0c0c0; /*color for current page in breadcrumb display*/
}

[Jason Bobich]

Can you provide a live link? You can send it privately if you want through My Account > Submit private info here on the support site.

[nd984]

Submitted. Thanks for all your help.

[Jason Bobich]

Sorry for the confusion. I was hoping with the link to your site, I could see the issue. Can you try to show me a live example of the issue? Can you put the logo image you’re trying into your site and save it? This way I can see what’s going on, and we can get things moving along.

[nd984]

Hi Jason, the site I sent you is showing the issue right now using the latest version of Firefox and IE. The logo on the page was created as a 940 px wide image with the CSS I sent and I am able to reproduce the issue on multiple computers.

[Jason Bobich]

Aw, I see what’s going on. I’m using a retina laptop and you have the default Barely Corporate logo in for the 2x image. I think the confusion is with trying to do it through the customizer.

Go to Appearance > Theme Options > Layout > Header > Logo, and try to set up your logo from there. And let’s see where that puts us.

[nd984]

Hi Jason — that seems to have fixed it. Thanks very much!

[Author]

Replies