The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How do i make the mobile version of my website display only on mobile phones?

  • Anonymous
    # March 10, 2013 at 10:59 am

    how do i create a mobile version of my website that only shows in mobile phones.? i just want to know how i can adapt the version of my website to only mobile, i’m not talking about styling and code.

    # March 10, 2013 at 12:58 pm

    @Jarolin, if you’re talking about a completely different “mobile-version” of your site, rather than a responsively designed site, you’d create the site just like your desktop version, using css and html, create a mobile sub-domain (ie, store your mobile version in the new subdomain, then use a redirect to detect if the users browser is mobile.

    Although there’s several different ways to redirect traffic, here’s a snippet provided on css-tricks

    # March 11, 2013 at 12:35 pm

    Check out
    It is super easy to use, it works well and it is available in whatever language you prefer: ASP, JQuery, JavaScript, PHP, and a bunch of others…

    # March 11, 2013 at 4:05 pm

    /* Smartphones (portrait and landscape)

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */

    # March 11, 2013 at 4:12 pm

    That’s styling though, Jarolin said he wasn’t talking about that. Apart from that, I can image there are smartphones with smaller than 320px or bigger than 480px screens (for example iPhone 5 and Galaxy SIII)

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed