Logo streched

Hey @acqua,

You could fix this with a little custom CSS.

.td-header-style-1 .td-header-sp-logo img {
 max-width: 90px;
}

Hope this helps ??

hi Andrew thanks for your help
Unfortunately I have added it but still issue on Firefox

Hey @acqua,

Strange, I don’t use Firefox. However I can see in Google Chrome it’s working fine. In Safari I am able to replicate the issue, however adding the below would fix it:

.td-header-style-1 .td-header-sp-logo img {
 max-height: 90px !important;
 max-width: 90px !important;
}

!important is a little naughty, however it will make sure nothing is overridden.

• This reply was modified 3 years, 11 months ago by Anonymous User 16151069.

I used the last code but still issue on FF

I’ve just downloaded Firefox now. Can you try this:

<img src="https://www.backdoorpodcast.com/wp-content/uploads/2018/02/logo.png" alt="Backdoorpodcast" title="Backdoorpodcast" width="252" height="250">

Remove the width and height from the img tag. These inline styles are forcing the image to stretch. They may be set within WordPress.

Let me know if you figure it out. ??

But there is no tag where width and height get added

I think by default logo in css is 252

• This reply was modified 3 years, 11 months ago by acqua.

That’s a pain, usually you can remove them by editing the image in WordPress. Last suggestion from me to try and override these inline styles

.td-header-style-1 .td-header-sp-logo img {
 height: 90px !important;
 width: 90px !important;
}

What do you mean override?

You’ve two inline styles on your image:
width="252" height="250"

These are stretching the image. Safari and Chrome and able to pick up the max-width style hence these two styles mentioned above are not applying, thus the image is not being stretched in these browsers.

However, in Firefox these inline styles are being applied over the the max-width style so the image is being stretched. So by adding these styles, we should be able to override the two mentioned styles.

.td-header-style-1 .td-header-sp-logo img {
 height: 90px !important;
 width: 90px !important;
}

Let me know if it works!

• This reply was modified 3 years, 11 months ago by Anonymous User 16151069.

Ok but I had already added it and didnt help ??

This CSS is slightly different to the previous mentioned CSS. You can see it’s for height and width only. Not max-height and max-width. So it may work.

• This reply was modified 3 years, 11 months ago by Anonymous User 16151069.

still not fixed ??

Sorry I couldn’t be of help. Definitely look into removing the fixed height and width on your image. That will fix it for sure.

width="252" height="250"

Thanks! ??

I can’t find it anywhere

Can anyone help please?