Viewing 15 replies - 1 through 15 (of 21 total)
  • Anonymous User 16151069

    (@anonymized-16151069)

    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 ??

    Thread Starter acqua

    (@acqua)

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

    Anonymous User 16151069

    (@anonymized-16151069)

    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.
    Thread Starter acqua

    (@acqua)

    I used the last code but still issue on FF

    Anonymous User 16151069

    (@anonymized-16151069)

    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. ??

    Thread Starter acqua

    (@acqua)

    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.
    Anonymous User 16151069

    (@anonymized-16151069)

    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;
    }
    Thread Starter acqua

    (@acqua)

    What do you mean override?

    Anonymous User 16151069

    (@anonymized-16151069)

    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.
    Thread Starter acqua

    (@acqua)

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

    Anonymous User 16151069

    (@anonymized-16151069)

    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.
    Thread Starter acqua

    (@acqua)

    still not fixed ??

    Anonymous User 16151069

    (@anonymized-16151069)

    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! ??

    Thread Starter acqua

    (@acqua)

    I can’t find it anywhere

    Thread Starter acqua

    (@acqua)

    Can anyone help please?

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Logo streched’ is closed to new replies.