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

Question

Intro

this is similar to this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the answer was ambiguous.

Question

I want to remove the left column in the azure help page and expand the main body to make it cover the widht of the screen. The first part can easily be done by this

#sidebarContent {display:none}

How ever the second part must conver this

media (max-width: 1199.99999px)

to this

media (max-width: 100%)

But I have no idea how to do that using stylish.. ideas?

Answer 1

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: