3

I'm having a problem viewing this website on my desktop browser. They have a responsive/fluid design that shows a mobile menu button instead of a horizontal nav-bar when the browser width is less than 990px.

Since I'm using Firefox with 125% zoom, my desktop browser is less than 990px effective width.

I looked into the CSS code and found the line. How can I use Stylish, Greasemonkey, or some other way to automatically replace the max-width value of "990px" with "800px"?

@media (max-width:990px) { ... }

I'm using Firefox 23 on Windows 7.

Edit: Based on comments so far, I need to replace their CSS file with my own custom CSS file. So how do I use Greasemonkey to replace the href (which appears to be a non-static filename)?

<link rel="stylesheet" type="text/css" href="http://d1h60c43tcq0zx.cloudfront.net/static/css/versioned/global-cdn-ac243f54ab6bb9637fcc5fa32f8b514d.css"></link>
Mr-IDE
  • 7,051
  • 1
  • 53
  • 59
wisbucky
  • 33,218
  • 10
  • 150
  • 101
  • An overly invasive way to solve this would be to edit your host file and use a local version of their css that has a better width restriction for you. – Meximize Sep 20 '13 at 23:13
  • You can't do a replacement like this using those extensions as far as I know. You can only write your own set of styles to overwrite it. – Jake Sep 20 '13 at 23:23

2 Answers2

5

One way to do this is to:

  1. Find the offending <link> using the constant part of the text in the href.
  2. Record that link's href.
  3. Delete that link.
  4. Use GM_xmlhttpRequest() to fetch the file again (hopefully it's cached).
  5. Use regex to fix the fetched CSS.
  6. Use GM_addStyle() to add the fixed CSS.

Here's a complete Greasemonkey script that illustrates the process:

// ==UserScript==
// @name     _Replace bad CSS link
// @include  http://www.fleaflicker.com/nfl/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// @grant    GM_xmlhttpRequest
// ==/UserScript==

var badCSS  = $("link[href*='global-cdn-']");
var badURL  = badCSS.attr ("href");

badCSS.remove ();

GM_xmlhttpRequest ( {
    method:     "GET",
    url:        badURL,
    onload:     function (rsp){
        var betterCSS   = rsp.responseText.replace (
            /max-width:990px/g, "max-width:500px"
        );

        GM_addStyle (betterCSS);
    }
} );


Notes:

  1. For faster/better performance, if the CSS does not change often, hand edit it and save it in the same folder that you install your script from. Then use GM getResourceText() to get the CSS, instead of GM_xmlhttpRequest().
  2. If page "flicker is an annoyance, due to start-up delays, that is a whole other problem, that can probably be solved with @run-at document-start and mutation observers.
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • 1
    That worked like a charm. Amazing that it could dynamically replace the 990px with 800px, that way it will work even when the source CSS changes. I didn't even notice any flickering either. orz – wisbucky Sep 24 '13 at 09:11
  • great answer.. unfortunately it only applies to greasemonkey/FF, [here](https://stackoverflow.com/questions/45182275/how-to-override-media-max-width-using-stylish) is a similar question specifically for stylish/chrome – abbood Jul 19 '17 at 06:14
  • @abbood, This does work on Chrome with Tampermonkey. Might look at your specific case in a few days. (I'm busy, no promises.) – Brock Adams Jul 19 '17 at 06:54
  • @BrockAdams Did you get this to work with Chrome and Tampermonkey somehow? – Casper Dec 25 '20 at 23:35
0

If you add Stylish to Firefox, you can add styles for a specific domain. I usually find that I need to include !important with many styles to get them recognised.

Another option for Firefox is to edit the userContent.css file directly. You can easily google "userContent.css firefox windows7" to find its location. (I use a Mac.)

ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • I don't think it's that practical for my case because 1) There are ~50 elements within the @media block. 2) I can't simply append an `!important` after each one because I need to eliminate the property. So I would need to look up what the original value for every property, then add `!important` to that. – wisbucky Sep 20 '13 at 23:41