Re: Media Queries

Posted by GregChapman on Oct 15, 2016; 3:57pm
URL: https://support.nabble.com/Media-Queries-tp7597404p7597408.html

Mmm!  This is interesting.
There seem to have been developments since I last investigated this stuff and I may be a little out of date.

Before my previous post I checked this forum for the line:
<meta name="viewport" content="width=device-width, initial-scale=1">
and it didn't have it.

Then, I was surprised to see such the obviously functional class "topic-column" in your post -  I checked and it is is there - and, it seems, many more that I could be sure were not there when I last looked.

I then turned to one of my forums (on the n3 server) and it does have the "viewport" lin in the code. On that forum I have both the "Responsiveness" options checked:
+ Responsive layout (BETA)
+ Better new post interface for mobile users

I also see in the HTML generated for the forum's home page, this code:

<style type="text/css">
@media (max-width: 600px) {
#search-box,#topic-search-box{margin:1em 0}
td.pin-column img{display:none}
}
</style>

which is clearly part (probably not all) of the extra code that is generated  when the "Responsive layout (BETA)" option is checked and confirms that your test code is syntactically correct so should work (even if it looks as if it may be a little drastic for real world use! ).

My best guess, without looking further, is that if you're generating that your code by inserting it in the CSS box on the "Change Appearance" toolbar, and it then gets overridden by some more "local" code which has higher priority.

The default styling for a Nabble forum is inserted by the line:
<link rel="stylesheet" href="/nabble.pack.css?v=29" type="text/css" />

Code from the CSS box is inserted by the line:
<link rel="stylesheet" href="/template/NamlServlet.jtp?macro=site_style" type="text/css" />

i.e. they both take their styling instructions from external stylesheets.

Whereas the responsiveness code is being inserted through < style> tags in the header of the page, i.e. an internal stylesheet - and internal stylesheets take precedence over the statements in an external stylesheet. (and inline styling instructions over-rule even internal stylesheets.)

I suspect that to get your code to work will require that you will need to code it into a NAML macro that generates the HTML for the page. This must be how the responsive code gets into the < style> tags.