How do I fix css or code from my site logo so it always maintains the original size of width and height [closed]

Navigation
0

I put additional 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 at the time I publish does not update the logo to be the same height, at the time that I scroll down with the scrollbar 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 already defined everything for 300x91 I do not know how to fix Thanks

    
asked by anonymous 17.12.2018 / 14:52

1 answer

2

Your problem may be because you have a class with a larger hierarchy setting the maximum height to 30px.

Another point is that:

  

The min-height and max-height properties override height .

As you can read in this Mozilla documentation: link

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:Youcanreadaboutthehierarchyandpriorityofclasseshereinthisquestion: Which css selector takes priority?

    
17.12.2018 / 15:22
Initialization of methods with array in the console UPDATE with two conditions