Logo has incorrect aspect ratio

[bradumbaugh]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

When I set a logo image (as described in the docs), its aspect ratio is incorrect in the header. For example, here's a sample logo I'm playing with:

When I create a new MkDocs site, and use the latest Material theme, here's what I'm seeing:

Expected behaviour

Icon renders at the same aspect ratio as the file

Actual behaviour

Logo is horizontally squished

Steps to reproduce

• Create a new, empty MkDocs site, using the latest Material theme
• Set a logo (maybe easier to see if you use a logo that's not square)
• mkdocs serve

Package versions

• Python: Python 3.8.2
• MkDocs: mkdocs, version 1.2.3
• Material: Version: 8.1.7+insiders.4.6.1

Configuration

site_name: Test Site
theme:
  name: material
  logo: assets/logo.png

System information

• Operating system: macOS Monterey, 12.0.1
• Browser: Safari 15.1, Chrome 97, Firefox 96

[squidfunk]

Confirmed. I'm pretty stunned that nobody reported this up to now 😅 It's been like that for ages.

[squidfunk]

Fixed in e9211d9. The width is now set to auto, so the logo always stretches to the available height. I think this should be the best default. Otherwise, it's always overridable with CSS. I tested with a long image:

[squidfunk]

Released as part of 8.1.8

[bradumbaugh]

Awesome—thank you, @squidfunk!

[squidfunk]

Found another problem: long images were cutoff in the drawer, i.e. long text logos. This is now fixed in 5462bf5. The issue can be seen on the PassivBot documentation.

[VR2ualize]

Fixed in e9211d9. The width is now set to auto, so the logo always stretches to the available height. I think this should be the best default. Otherwise, it's always overridable with CSS. I tested with a long image:

Hi, firstly let me say, mkdocs with material has been the most fun I've had building a site in a long time, and I look forward to checking out the sponsored "insiders" program :-) .. thanks again for the great work.

.. anyway, just wondering if you can point me in the right direction, I just installed mkdocs and material on ubuntu, and setup my site at github https://github.com/dyo-au/vr2ual.com .. and its auto deploying to https://vr2ual.com and its a test site.

Anyway, when I mkdocs serve and mkdocs build on my machine, the logo retains the proper aspect ratio, but on the deployed site, the logo is squished as this "issue" ticket, and considering the fix was ages ago, I assume my mkdocs and material are updated too.

Is there something I am misunderstanding?

Any guidance would be appreciated :-)

[squidfunk]

@VR2ualize thanks! I'd be glad to welcome you as a sponsor.

---

From your site https://vr2ual.com I see that you're using mkdocs-1.2.1, mkdocs-material-7.1.10, which is too old. Please upgrade to the latest version, which will very likely fix the problem. It's likely related to stale caches.

You can inspect the version used by examining the meta[name=generator] tag.

[VR2ualize]

Hi again .. thanks, I just became a sponsor :-)

I did as you said, upgraded and served and build with no problems, unfortunately, problem persisted, but it might be due to deployment issue. ie .. fleek.co deployment mkdocs image.

When I serve and build locally, I get the following on site.
mkdocs-1.3.1, mkdocs-material-8.3.9

When I deploy on fleek, i get the following on https://vr2ual.com
mkdocs-1.2.1, mkdocs-material-7.1.10

So, just went to fleek logs, and I see this.
Deploy started at 2022-07-25T13:06:05.277Z
2022-07-25T13:06:06.499Z: Deploy started
2022-07-25T13:06:08.920Z: Docker image: 'fleek/mkdocs'
2022-07-25T13:06:08.920Z: Build command: 'mkdocs build'
2022-07-25T13:06:08.920Z: Triggering build execution...
2022-07-25T13:06:53.705Z: Deployed to IPFS and got the hash:
2022-07-25T13:06:53.705Z: QmaKo9fARK7WB96cgcnkaiYTFCqDHrfzBfViRsCe4zK31R
2022-07-25T13:06:53.705Z: Checking content availability on IPFS...
2022-07-25T13:06:54.378Z: Updating DNS records...
2022-07-25T13:06:54.954Z: DNS was updated. You can visit the new site at:
2022-07-25T13:06:54.954Z: https://vr2ual.on.fleek.co
2022-07-25T13:06:51.708Z: WARNING - Config value: 'site_url'. Warning: This option is now required. Set to a valid URL or an empty string to avoid an error in a future release.
2022-07-25T13:06:51.708Z: WARNING - Config value: 'site_url'. Warning: The 'use_directory_urls' option has been disabled because 'site_url' contains an empty value. Either define a valid URL for 'site_url' or set 'use_directory_urls' to False.
2022-07-25T13:06:51.708Z: INFO - Cleaning site directory
2022-07-25T13:06:51.710Z: INFO - Building documentation to directory: /workspace/site
2022-07-25T13:06:52.207Z: INFO - Documentation built in 0.50 seconds

I haven´t encountered this before .. can I assume that perhaps the mkdocs image that fleek uses might be out-dated?

Cheers ;-)

[VR2ualize]

Sorry, I first posted html tags, I updated post to show mkdocs and material versions

[squidfunk]

I'm not a user of fleek, so it's best to ask the authors/maintainers of fleek why the latest version is not picked up. Unfortunately, I can't help you on that front, but maybe another user has experience with this. You can create a new discussion asking for help, or ask on StackOverflow. We recommend GitHub Pages btw.

Edit: it's likely that the Docker image fleek/mkdocs is out of date which is not provided by us.

[VR2ualize]

Thanks soo much for helping troubleshoot the issue with me. Yes, it does seem like the docker image is out-dated.
Just wondering, one of the solutions for fleek allows to use own docker image. Is there a recommendation for a docker image I could use?

[squidfunk]

Glad I could help. For the non-Insiders version, you can use the official Docker image, which is always up-to-date as it is rebuilt and released automatically on every new release. For Insiders, you would need to build and host it yourself according to our instructions.

[VR2ualize]

Thanks again .. im trying the official docker image now with fleek .. hopefully there is no issue with that, I'd love to get this to work with fleek, but it seems to be really slow to deploy with own image .. interesting. Anyway, once I get it working with the official docker image you provided, I will then proceed with the Insiders :-)

[VR2ualize]

Hey .. FYI .. that was the trick .. to use your docker :-) .. glad I had this issue .. now I will always be up-to-date .. I will do the insiders docker setup soon. Have a great day.

[Micha1011]

Confirmed. I'm pretty stunned that nobody reported this up to now 😅 It's been like that for ages.

Maybe a stupid question, but I am just starting with mkdocs...how exactly do I overwrite the size for the logo in CSS? How exactly do I adress the Logo in the css?

[epogrebnyak]

I'm thinking of adding a logo to project and was thinking - does adding a suggested logo size to docs possible?

For those of us who are not too creative graphically thais would be a savior saying to a designer @ I need a png that big for my docs logo". I went through several sites that use mkdocs-material and noticed the logo sizes vary a lot:

• https://orion-docs.prefect.io/latest/img/logos/prefect-logo-white.svg
• https://fastapi.tiangolo.com/img/icon-white.svg
• https://abpcomputing.web.cern.ch/cernlogo.png
• https://cap.dotnetcore.xyz/img/logo.svg

Should the suggested PNG size be somethign like 120 × 120? Or should one use SVG? Appreciate you answer and all of sucessful work in the project.

[alexvoss]

IMHO a hint in the documentation would be good. We may also want to provide recipes for people whose logos are not square or do not gracefully scale to 120x120. Some more established institutions (cough, universities) have logos and corporate identity guidelines that make the business of integrating logos into the default layout difficult. I am pretty sure that it is just a question of a bit of CSS to accommodate, for example, a logo that needs to include the institution name.

[squidfunk]

The defaults should cover most cases already, automatically adjusting sizing and keeping the aspect ratio, but the recommendation is to use a square logo.

[epogrebnyak]

The defaults should cover most cases already, automatically adjusting sizing and keeping the aspect ratio, but the recommendation is to use a square logo.

Does png size matter a lot? For example large png likely to loose a lot of detail when resized. Should one target 120x120 size for png maybe?

[squidfunk]

For example large png likely to loose a lot of detail when resized.

That's not a problem of file format, but a general problem of too many details in a too small image. My recommendation when it comes to logos is: keep it simple. For any further questions or comments on logo size, please create a new discussion, to not flood the inbox of all former participants of this issue. Thank you.