Disabling responsive design, for phones, on an individual page

Community Forums Forums Design Tips and Tricks Disabling responsive design, for phones, on an individual page

This topic is: not resolved

This topic contains 5 replies, has 3 voices, and was last updated by  Dorian Speed 1 year, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #50186

    graemeblake
    Participant
    Post count: 2

    There’s a page on my site that is easy to navigate on computers, and tablets. Very difficult on my iphone.

    I’d like to disable responsive design, for that page only, for phones. Anyone know how I could do this? I use the Modern Portfolio Theme. Thanks!

    http://lsathacks.com/explanations/lsat-69/
    #50320

    Dorian Speed
    Participant
    Post count: 140

    I’m sure there are a few ways to do this. What I’d do, I think, is assign a body class to that page. Then, in the media queries (the part of style.css that makes the theme responsive), you could specify that for that body class, use the original settings. Are you familiar with body classes? This is a good overview.


    Bringing websites Up to Speed
    Firebug will light the way to understanding the secrets of the Internet!

    #50323

    el_steele
    Participant
    Post count: 14

    This is not the quick fix you’re looking for (Dorian’s suggestion would do what you’re asking), but the ideal solution would be to design that content to better fit the experience on phones. You definitely don’t want to get in the habit of requiring users to be on a desktop in order to get your product (for some, phones are their only access to the web).

    I definitely don’t mean for that to be a lecture response but more of an encouragement to strive for better experiences and open access for everyone.


    #50324

    graemeblake
    Participant
    Post count: 2

    Thanks. I will look into Dorian’s suggestion.

    Everything looks great on the phone, except the menu. It really didn’t take well to the responsive theme. If I could access the full site on my phone, it’d be easy to navigate.

    Does that fit with what you meant?

    #50326

    el_steele
    Participant
    Post count: 14

    Yeah, I figured the issue was with the menu and I can see how the current responsive layout for phones would make for a long list to have to scroll through. I just wonder if there are improvements you could make with the UI that would make it a better experience on phones, rather than disabling the media queries altogether and discouraging users from accessing it from their smartphones.


    #50329

    Dorian Speed
    Participant
    Post count: 140

    So – what’s the deal? You want people to be able to see all five sections at once without a whole bunch of scrolling? Is that the menu you’re talking about, or am I missing something?

    What about if you…

    Create a class that ONLY displays on mobile devices.
    Create a bulleted list in the intro paragraph about “check out all of these amazing answers” and wrap it in said class.
    Each item on the list links to that section on the page. Here’s a tutorial on how to do so.


    Bringing websites Up to Speed
    Firebug will light the way to understanding the secrets of the Internet!

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

You must be logged in to reply to this topic.