Source code blocks width on mobile

[Andrey Listopadov]

Hello. Currently when I'm reading your blog from my phone, I see that code blocks exceed the width of the window (screenshot from dev console):

This adds annoying horizontal scroll to the page, and with touch controls it is quite hard to scroll straight down. This is due the min-width property in CSS:

.source pre {
    color: #333;
    font-size: 85%;
    background-color: #fdf6e3;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 40em; /* <-- not very adaptive */
}

I think you probably can replace min-width with width: 100% there, and change td.code CSS like this:

overflow-x: auto;
display: block;
width: 100%;

Though this does not seem to work for all code blocks for some reason, so it needs more thoughts given. This also may look more ugly, but on mobile it is better to scroll code itself instead of whole page. I'm not very experienced in web development, so maybe there's a better way to handle all this.