The display looks broken on our docsify site

[alexellis]

Bug Report

Hi, the display looks broken on our docsify site and I'm not really sure what happened.

Steps to reproduce

The source is here, and deployed via GitHub pages:

https://github.com/inlets/docs

What is current behaviour

The logo is out of scale and the buttons are not in the correct position.

What is the expected behaviour

Previously the front page loaded with the logo followed by the buttons. No changes have been made.

Other relevant information

• [x] Bug does still occur when all/other plugins are disabled?

• Your OS:

• Node.js version:

• npm/yarn version:

• Browser version:

• Docsify version:

• Docsify plugins:

I've tried with Safari and Chrome

Please create a reproducible sandbox

Can be deployed from the GitHub repo linked.

Mention the docsify version in which this bug was not present (if any)

HEAD / master (I would assume):

  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-php.min.js"></script>

[anikethsaha]

Thanks for the report, can you check with version 4.11.3 ?

[jhildenbiddle]

Hey @alexellis --

This is a docsify issue, although it is one that only appears when 1) coverpage content scales with the browser viewport and 2) when the browser window is sized disproportionately wide or tall. In your case, you have a large logo image that is set to width: 50% and a browser sized considerably wider than it is tall.

Two paths forward:

1. Apply a max-width value to your logo image. This will prevent your logo image from scaling beyond a fixed amount. Note that this cannot be done with markdown, so you will need to replace your marking image syntax:

   ![logo](images/inlets-logo.svg ':size=50%')

   With a standard HTML <img> tag with the style attribute:

   <img src="images/inlets-logo.svg" style="width: 50%; max-width: 300px;">

   Or add a <style> block to your index.html and create a CSS rule that targets the logo image:

   <style>
    .cover img[src$="inlets-logo.svg"] {
      max-width: 300px;
    }
   </style>

2. Wait for this bug to be fixed in the next release of docsify.

Note that the bug fix won't address your mega-image-scaling issue, but it will allow the coverpage to grow and contain its content the needed. Point being, you probably want to do both items listed above.