increase header size wellness pro

[chris_phdfrParticipant]

Hi,

I would like to increase the size of the header logo. I uploaded an image and the logo is displayed at 300 X 80 pixels.

this is what i read in the set up docs Images of exactly 600?—160 pixels will give the best results. Other sizes will be cropped in the upload process to create an image of the correct size. Also, the header image is double the display size so it will appear crisp on a retina screen. Though the upload size is 600?—160 pixels, the image will be displayed at 300?—80 pixels.

I read one post on the forum about it but it does not really work.

I tried to check the PHP file to see if i could simply change the values. ( i admit i only looked for the value 300 or 80 as i don't really know how to code in PHP)

I only found the value 600 and 160, I changed it to see if it would change the display size, it did not and it was still at 300X 80 px.

i just want to increase the header logo size from 300 X 80 px to like 400 X 90 px for instance...

any ideas how i could do it easily?

thanks a lot in advance,

regards,

chris

[chris_phdfrParticipant]

hi,

ok, I was so focused on PHP that I did not think of tweaking the sizes with CSS. I managed to do it by customizing the css stylesheet. ( I added the code in the wordpress css customizer)

This is what I did in case someone has the same question.

.header-image .site-title > a {
min-height: 90px;
}

.header-image .title-area {
max-width: 400px;
}

hope that helps

regards,

chris

[mat3dParticipant]

Hi and thanks for the tip.

It works, however the logo appears blurry. It looks like the code increases the size from 300x80 rather than using the full size of image (600x160).

Anybody has any idea how to solve this? I had a look at the function.php and style.css but it's a bit different than what I remember.

I'm using Wellness Pro version 4.0.0

Many thanks.

Mat

[mat3dParticipant]

Sorry meant version 1.1.4

[mat3dParticipant]

Right so it looks like I found a solution:

The default size for the header image is 600x160. I've changed these values in the function.php file to 900x240:

// Add support for custom header.
add_theme_support( 'custom-header', array(
'width' => 900,
'height' => 240,
'header-selector' => '.site-title a',
'header-text' => false,
'flex-height' => true,
) );

Then I changed the values in style.css to 450x120:

.header-image .title-area {
margin: 0 auto;
max-width: 450px;
padding: 0;
}

.header-image .site-title > a {
background-position: center !important;
background-size: contain !important;
float: left;
min-height: 120px;
width: 100%;
}

This way the logo appears sharp on both my iPhone 7 plus and my MacBook retina display.

I'm not sure if this is the best workaround but I'll leave it here in case somebody else stumble upon the same problem.

[snatal8Participant]

Thanks for posting this! I just had the same question!

[snatal8Participant]

I'm wondering if you noticed when you increased the logo that it didn't work on all browsers. I'm having this issue. I increased the size of the logo and it looks great in Firefox but it didn't enlarge in Chrome or Safari.

Any suggestions?

[mat3dParticipant]

Hmm I'm not sure what the problem could be, mine looks fine on the three browsers.

[Author]

Posts