Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Wrapping Code Samples on Mobile Devices

By  on  

One part of being a technical blogger that I've had to come to grips with is code samples and small mobile device screens.  I was amazed when I saw a double-digit percentage of visits to this blog were from mobile phones -- mental!  I started paying more attention to detail on said devices and I realized that code samples required loads of horizontal scrolling:  yuck.  By utilizing CSS white-space, we can make code wrap and avoid arm-numbing scrolling on small screens:

pre {
	white-space: pre-line;
}

I like using PrismJS so that requires a different selector:

pre[class*='language-'], code[class*='language-'] {
	white-space: pre-line;
}

Thankfully white-space lets me help you all avoid horizontal scrolling on mobiles. Of course you'll need to choose which media query you want to apply that to, but I'll let you do that.  In some cases it may be difficult to read the line-broken code, but that's surely better than all that crazy scrolling.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    Create Twitter-Style Dropdowns Using jQuery

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • By
    “Top” Watermark Using MooTools

    Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is...

Discussion

  1. Michael

    I’m also using PrismJS. Any tips to get the line-numbers to adjust?

  2. Andrew

    Also, by default tab size is about 4 i believe, this snippet brings it back a little…

    // @media query here for small screens...
pre{
      webkit-tab-size: 2;
      -moz-tab-size: 2;
      -ms-tab-size: 2;
      -o-tab-size: 2;
      tab-size: 2;
}

    That is, assuming you’ve got tabs over spaces (which you should of course).

  3. Adam

    Interesting post. I have thought about this for quite some time. The thing is that code is much more readable, in my opinion, when not wrapping it like this.

    Since we are used to large screens, reading wrapped code like this is hard and unfamiliar. We do not code on small screens and therefor it makes more sense to scroll horizontally when viewing code then to force line breaking/wrapping.

  4. Isaac

    No offense, but I would rather go with all the crazy scrolling. I honestly think it looks nicer than the broken up code, and it is easier to read and understand code samples.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!