How to Replace @Media (Max-Width) Using Stylish or Greasemonkey

How to replace @media (max-width) using Stylish or Greasemonkey?

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.

how to override @media (max-width) using stylish

To override a media query you just need to load another media query - that also applies to your device - after it.

Well...you want a blunt media query that applies to everything. The best way is to use @media (min-width: 1px) since that includes all devices.

Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this

#sidebar {
    display: none;
}
@media (min-width: 1px) {
    .mainContainer {
        margin: 0 auto;
        width: 100vw;
        padding: 0;
    }
    body>.container {
    padding: 0;
}
}

New code: (with different selector for width)

#sidebar {
    display: none;
}
@media (min-width: 1px) {
    .mainContainer { /*example styles*/
        margin: 0 auto;
        width: 100vw;
    }
    body>.container {
    padding: 0;
}
    body>.mainContainer>main {
    max-width: 100vw!important;

}
}

You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.

Before:

After:

How to inject css in another page

If I understand your question well, you want to create mobile-specific CSS to fix your website's viewing, is that right?
If so, you can use CSS's media queries for so, like this:

@media only screen 
   and (min-device-width : xxx px) 
   and (max-device-width : xxx px) 
   and (orientation : landscape or portrait)
   and (min-resolution: xxx dpi){ 

   // your css goes here

}

Here are some links that might help you:

http://help.campaignmonitor.com/topic.aspx?t=164

How to apply different CSS for mobile devices not just based on media width/height

http://css-tricks.com/snippets/css/retina-display-media-query/

---

Related Topics