Dynamically Load/Unload parts of HTML

[FrancisChung]

Hi there,

I'm trying to build a page in Processwire where it has a desktop layout of  

Sub Nav | Content Column 1 | Content Column 2

and a mobile layout of 

Content Column 

As you can see the Sub Nav appears and disappears depending on the viewport of the design.

I've been doing a lot of searching and reading and there does not seem to be a way where I can dynamically load / unload the Sub Nav section of the page and reload and render the page again when the view port changes?

Does this mean I need a mobile template and a desktop template for that page?
How would I load each appropriate one?

Are there any PW modules that would help me achieve this task?
(I have already looked at MarkupAdaptive module but the example doesn't seem to show dynamically loading parts of the HTML)

Thanks in advance.

[tpr]

This kind of stuff is generally solved by CSS media queries - show content on mobile, hide on larger screen sizes. Google for responsive design/layout/grid.

@Beluga: it was close!

[Beluga]

It sounds like good old CSS media queries would solve this just fine: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Edit: ok, posted probably at the exact same second as tpr

[Christophe]

Perhaps you'll find your solution here:

http://stackoverflow.com/questions/18890053/php-conditions-depending-on-window-width-media-queries

I guess there are "solutions" with PHP, PHP + Javascript, Javascript...

By the way, a ProcessWire version is missing at "3rd party modules" here: https://github.com/serbanghita/mobile-detect

NB: don't forget to also read the last answer(s).

Edit: see also https://css-tricks.com/forums/topic/how-to-load-a-section-of-content-only-if-the-screen-is-over-a-certain-width/

[MuchDev]

A great way to learn would be a framework that has a responsive design already. The word you are looking for is responsive. There are tons of frameworks that will help you, or you could code everything from scratch and write all of your own media queries as well. I learned a lot from bootstrap and skeleton about this .

http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html

[FrancisChung]

Thanks for the replies. The helpfulness of this community never ceases to amaze me.

I already knew about Media Queries, but what I needed was something extra like response.js.

And this post that Christophe mentioned was exactly what I was looking for.
 

https://css-tricks.com/forums/topic/how-to-load-a-section-of-content-only-if-the-screen-is-over-a-certain-width/