Disabling responsive design, for phones, on an individual page

[graemeblake]

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/

[Dorian Speed]

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!

[el_steele]

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.

---

@el_steele | elsteele.com

[graemeblake]

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?

[el_steele]

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.

---

@el_steele | elsteele.com

[Dorian Speed]

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!

[Author]

Posts