How I fix css or code from my website logo so it always keeps the original size of width and height

Question

added css:

nav-brand-sitelogo {
    height: 91px!important;  
    width: 300px!important;
}

element.style {
  height: 91px!important;  
    width: 300px!important;
}

.can-shrink-brand.sticky-brand-shrink-on .desktop-sticky .navbar-brand img {
height: 91px!important;
width: 300px!important; 
 }

But when I publish it doesn’t update the logo to be the same height, at the time I go down with the scroll bar it gives a distorted

<img src="https://mdwebdesign.tk/wp-content/uploads/2018/07/mdlogopng.png" alt="Voltar para a página inicial" class="" width="300" height="91" style="max-width:250px;max-height:100px" data-no-retina="" data-czr-model_id="logo" data-czr-template="templates/parts/header/parts/logo">

I think it’s this max witdh and max-heght, but I’ve set everything to 300 x 91 I don’t know how to fix Thank you

Answer 1

Your problem may be pq vc has a class with a higher hierarchy defining the maximum height as 30px.

Another point is that:

The properties min-height and max-height overlap with height.

As you can read in this Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/height

Adjust your CSS here:

.can-shrink-brand.sticky-brand-shrink-on .desktop-sticky .navbar-brand img {
    max-height: 30px!important; /* mude a altura aqui*/
    width: auto!important;
}

---

TIP: You can read about the hierarchy and priority of classes here on this question: Which css selector has priority?