Svg mobile logo scales incorrectly

Contribute Bug
9

I’m going to test this a little more, but it seems like a good solution… thanks for figuring it out. My main concern with flex-grow is how it might interact with sibling header elements that are sometimes added in themes, but it looks like it works fine by default!

This issue doesn’t happen on desktop because we have a height specified

.d-header #site-logo {
  height: 2.667em;
}

On mobile we assume that the logo is probably larger than the space available, and constrain it to fit:

.d-header #site-logo {
  max-height: 2.4em;
  max-width: 100%;
}

So dimensionless SVGs on desktop are given a dimension in CSS, and on mobile we let the logo determine its size (limited by max-height or max-width, whichever comes first). So given no dimensions and no directive to grow larger, it stays tiny (as dictated by the min-width on .title, without that it’s invisible!).

Another possible fix is to update the mobile logo max-height to height. That would be consistent with how logos are treated on desktop.

I’ll probably get a fix in for this tomorrow, but in the meantime adding dimensions to the SVG is an easy fix, it doesn’t even have to be an accurate dimension… if you throw on width="1000" and nothing else it will grow to fit the space and have its max size constrained by CSS.

2 Likes