Code syntax highlighting with Prism. Wiki page update suggestion

[mausic]

Hi there! Thanks for an amazing theme. I recently created my personal blog and decided to use your theme.

After my first publication went live, I received an email from Google that my blog-post has mobile usability issues:

• Contest wider than screen
• Clickable elements too close together

After some time spent digging the problem, I realized that issues were caused by prism.js syntax highlighting. I successfully solved the problem and would like to suggest to update the corresponding wiki page so others would have a solution as well.

To solve issues it is required to make the following update

<style>
  code {
    overflow-x: auto;
  }
</style>

[eddiesigner]

Hi!

Thanks for the heads up! I just released a new version which kinda addresses this issue. In the new version I replaced overflow: auto with overflow-x: auto for the pre elements.

Your solution might solve that issue but it will render the scroll bar ~20px before the bottom of the container, that's why the overflow should happen in the pre element instead.

You also must know that the Google alerts are not always correct, sometimes you get that message if you have some sliders in place or something similar, that doesn't mean that your content is wider than the screen, it's simply a false-positive.

[mausic]

Oh, thank you!

I'll check it out nearest future.

Yeah, I understand the situation with Google alerts, I just shared my solution on how I got rid from those annoying alerts in belief that it may help someone some time.

[eddiesigner]

I appreciate that!

[eddiesigner]

I will close this issue for now, please feel free to reopen it if needed.