Hey @sidak apologies for missing this! Sorry for the late reply.
To fix this you'll need to look at skin.json and make the styles property of skins.vector.styles.responsive an array.
responsive.less should make use of the media query.
let me know if any other questions!

I'll mentor this task for Google-Code-In 2016 :)

Alright, I've got an issue. I took this block in skin.json:

// ...
"skins.vector.styles.responsive": {
  "targets": [ "desktop", "mobile" ],
  "position": "top",
  "styles": {
    "responsive.less": {
      "media": "screen and (max-width: 768px)"
    }
  }
},
// ...

... and replaced it with this:

// ...
"skins.vector.styles.responsive": {
  "targets": [ "desktop", "mobile" ],
  "position": "top",
  "styles": {
    "responsive.less": {
      "media": "screen and (max-width: @deviceWidthTablet)"
    }
  }
},
// ...

However, this made it so that responsive.less wasn't being loaded at all. It doesn't throw any errors in the logs as far as I can see. However, it works properly if I just leave the media query in skin.json blank, like:

"media": {}

... And manually add the media query to responsive.less, like:

/*
  The styles below essentially place the navigation menu below the content,
  instead of to the side of it. They also hide the logo, as there's no space
  left for it.
*/
@media screen and (max-width: @deviceWidthTablet){
  div#mw-head {
    position: static !important; /* stylelint-disable-line declaration-no-important */
    margin-top: 0.5em;
  }
  // ...

This feels really dirty though. Because it completely bypasses ResourceLoader. I'm not sure what's causing this. Should I just go ahead with this approach?

Change 326385 had a related patch set uploaded (by Jo12bar):
Use global variable for tablet media query in responsive.less

https://gerrit.wikimedia.org/r/326385

Yes I think it's fine to move the media query logic into the less file itself and include it like a normal file - the end result is the same and all ResourceLoader does here is try to make this easier.

responsive.less would then just be an array value (not a key).

Alright, I'll switch it to an array when I get home from school - probably after 5:00pm.

Change 326874 had a related patch set uploaded (by Jo12bar):
Fix media query bug & change skin.json structure

https://gerrit.wikimedia.org/r/326874

Should be fixed :)

Alright, I just squashed both of those reviews into the original code review. Sorry that I submitted multiple reviews - I guess I'm too used to the GitHub workflow!

Thanks!

Just a heads up: I'm flying down to Mexico for a family vacation within the next two hours, and I probably won't have WiFi. As a result, I'll probably be unable to work on this bug until Christmas Day. Sorry about that. If I happen to find a WiFi hotspot, then I'll definitely check in, but otherwise I'll see you on the 25th!

Again, sorry about this!

Change 326874 abandoned by Jdlrobson:
Fix media query bug & change skin.json structure

Reason:
This was squashed into the parent commit.

https://gerrit.wikimedia.org/r/326874

Change 326385 merged by jenkins-bot:
Use global variable for tablet media query in responsive.less

https://gerrit.wikimedia.org/r/326385

Thanks!