max-height ruining header
-
After the update there’s new css that is messing up my header:
@media (min-width: 1025px)
.whb-general-header .woodmart-logo img {
max-height: 200px;
}
@media (min-width: 1025px)
.whb-sticked .whb-general-header .woodmart-logo img {
max-height: 100px;
}
I’m assuming it takes whatever the row height is set to in the theme’s Header Builder and creates a max-height for your logo image. Setting the logo width in the Header Builder also creates a max-width for the logo image. Why would this be set up this way? You’re not supposed to have both max-height and max-width because you end up with skewed images.
Why can’t this be overwritten in the custom css? Please advise on how to fix this.
Attachments:
You must be
logged in to view attached files.
Hi,
In our latest update, we did not change any CSS related to the header logo and following CSS that you described was a part of our header from the time header builder was added to our theme in update 2.0 near two years ago. It is used to control logo size and transition between default and sticky header during scrolling.
max-height and max-width CSS parameters used together did not skew images because they limit only maximum sizes of image sides and initial image aspect ratio will be in priority. Skewing is possible only if direct height or width in pixels is added to this image.
You can overweight every CSS selector form our theme by using the CSS custom code according to standard CSS specificity rules (https://www.w3schools.com/css/css_specificity.asp). For example, you can add body tag to your custom code selector (https://gyazo.com/d322383f5b769004dff23d4c1405f5a4) to make them more specified comparing to our themes styles. As an alternative, you can use !important rule to.
Regards
.
