XF 1.2 How to make a page/template element responsive?

[CTXMedia]

I'm trying to learn about responsive design but haven't quite got my head around it yet, so I'm wondering if one of you styling guru's would give me a hand with something?

I have a shallow link-bar across the top of my forums that gives quick-jump access to all of my other forums. There are currently eight links but I know when we move to XF 1.2 that these will wrap to the point where they may take up two, three, or even more lines at the top of the page - making the first quarter of the page a big lump of links - which isn't desirable (or particularly practical).

So - how do I remove some of those links based on narrower screen widths? Say, show all eight for 940px or greater, maybe five for a narrower 'tablet' width, and maybe only one or two for a portrait 'mobile' width?

Or better still, replace the links with a drop-down selector for really narrow width?

Cheers,
Shaun

 

[Paul B]

You apply the "responsiveness" to the CSS, like so: http://xenforo.com/community/thread...-variable-switch-in-xf-1-2.53375/#post-570422

Conversely, if you want to make pages specifically not responsive, use this:

<xen:container set="$noResponsive">1</xen:container>

Or I suppose you could always use the <xen:if is="{$isResponsive}"> conditional to remove stuff completely.

 

[CTXMedia]

Thanks - so there is a series of max-width: conditionals you can use to test for desktop, tablet (land/portrait), mobile (landscape/port)?

So I'd set-up the CSS for my link banner as normal, then use:

<xen:if is="@enableResponsive">

To test if responsive is enabled in the style settings ... and then apply adjustments to the CSS based on width:

@media (max-width:@maxResponsiveNarrowWidth)

... for each width type?

What about compacting the links into a tappable drop-down for the most narrow width - are there examples of this in the default 1.2 CSS?