Sridhar Katakam

Genesis and WordPress Tutorials

How to add a link to switch between responsive and desktop views in Genesis

by 7 Comments

A user emailed me today:

...I am working on a website for a client but having a problem coming up with a solution per her request.
She would like for her readers to be able to have a choice when viewing her website on mobile devices.
Currently her site is responsive (thanks to your help on the Studiopress forums).

Basically giving readers an option to switch from mobile(responsive) view to desktop view (full website view)...

This can be easily set up using Responsive Switch javascript. Below are the steps.

Screenshots taken in mobile:

Screenshot_2014-08-20-13-55-46

When the 'Switch to desktop version' link is tapped,

Screenshot_2014-08-20-13-55-57

Screencast:

The links to switch between responsive and desktop views appears when the screen width is less than 1024px i.e., from 1023px and below.

Step 1

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hey Sridhar!

    Thank you yet again for the wonderful tutorial!

    I’ve used this coding for a few designs already per client request, but I just had another throw me a curveball by requesting the reverse of this coding so that the desktop version appears on mobile, and the reader can to click on a ‘view as mobile’ option.

    Is that possible?

    Reply

  • Hello,
    NIce post
    Does this work also in prestashop?
    I would like also to give the chance to change it backagain to mobile after a previous change.
    Best Regards

    Reply

  • Hi there,
    I am using Dynamik, followed the steps outlined but it is not working. I added the responsive-switch.min.js to the Dynamik-Gen theme in lib/js. Do I need to replace the CHILD_THEME_INFO in the script?

    Thanks in advance

    Reply
    • >