Grow your CSS skills. Land your dream job.

Horizontal scrolling inside divs on mobile devices

  • # August 31, 2012 at 12:41 am

    Hi everyone! I am currently making a blog, with lots of code examples in the posts, and would really like the website to be viewable on mobile devices.

    I have made all the necessary css to make the page “reactive” so everything fits on a mobile screen. The only thing that seems not to work is horizontal scrolling with in pre tags. I have read in several places that this is not possible, as it could lead to users zooming all the way in to a scroll area and not being able to scroll out of it (since the scrolling is taking place inside the div, not on the page). I assumed I had no way around this, until I happened on another site on my mobile, with code that *could* scroll horizontally:
    http://pfultz2.github.com/Pythy/

    Currently I have code inside pre tags, with

    overflow-x: auto; 

    set in the in the css. My website is here where horizontal scrolling in code doesn’t work:
    http://kholdstare.github.com/index.html

    Looking at the css of both sites, I do not see anything that is radically different. I also couldn’t find any custom javascript on the pythy website that could be doing it.

    Any ideas?
    Thank you.

    # August 31, 2012 at 12:50 am

    It works fine for me?

    # August 31, 2012 at 12:55 am

    Thanks for reading!

    Hmm… What are you using? I’m trying on Firefox on Android, and it doesn’t seem to work for me.

    EDIT:
    I tried on the default browser on android, and it worked fine!
    Seems to be a bug in firefox! That was easy :P

    # April 28, 2013 at 2:00 pm

    I’m working on a new WordPress theme for my blog, and I’m trying to sort out a horizontal scrolling navigation menu for mobile devices. I’ve messed with the overflow property in the CSS. I even tried restricting the height and increasing the width, but the navigation links just won’t stay on 1 row. Any ideas?

    I’m experimenting on a [Your text to link here…](http://jddurrant.net16.net/2013/ “test site”) written in HTML, and I’m not adding the PHP until later. I uploaded the files to a [Your text to link here…](https://github.com/JDDurrant/Project-Beta-2013 “github repo”).

    I didn’t write animate.css, and there’s not really any need to pay attention to it. I’m just using it for the onload animations. If you want to check it out, [Your text to link here…](http://daneden.me/animate/ “click here”).

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".