Changing page content based on mobile mode

Asked on November 6, 2015 in How To.

Not sure if this can be done, but it doesn’t seem impossible:
I have a page with a flipbook plugin to display my catalog. The problem is that while everything is a good size on a desktop computer, a two-page spread is barely view-able in portrait mode on a tablet, and there’s just no point on a smart phone.

So I figured the solution would be to have a single page slideshow for the responsive layouts. My question is, how to do that?  The flipbook uses a shortcode on the page and it seems like that might be easy to replace with a shortcode for the slideshow. Or another possibility is simply changing the catalog link to a different page with the slideshow in mobile mode. Are either of these doable in DevKit? Or is there another method?

mr-gpii Layers User
1 Answer(s)
Answered on November 9, 2015.

Hi there,
You would have to build both layouts into the same page, then hide the elements with CSS using media queries. You can learn more about this CSS technique here:
How to Customize the Mobile or Responsive Views

I never thought of that. That’s a pretty good idea! Would I just be using “display: none” then?

on November 9, 2015.