View gist:4964d82509ba252a966d
1
javascript:void((function(d){d.querySelector('.CodeMirror-gutter').style.display='none';})(document));
View gist:644f90a5f9779bf45523

Media Queries - Advanced Methods

For an extensive guide to get started with media queries, go to this previous article.

If you have worked with responsive design, you have probably used media queries. Media queries are a clean and simple way to create responsive websites using CSS. They work by allowing you to change the style of the page when the user's screen is a certain size. Here is a simple example:

@media (max-width: 700px) {
    p {
        color: red;
    }
}
View gist:da4e0dbb7b0a51742294
1 2 3 4 5 6 7 8 9 10
// A script to quickly select the entire strike zone in BaseballSavant.com's pitchFX search tool.
 
(function(d) {
for (var i = 1; i <= 9; i++) {
if (d.getElementById('chk_z_' + i)) {
d.getElementById('chk_z_' + i).checked=true;
}
}
for (var i = 11; i <= 14; i++) {
if (d.getElementById('chk_z_' + i)) {
View gist:bef0f20a1389f641cd14
1 2 3 4 5 6 7 8 9 10
// A script to quickly select everything outside the strike zone in BaseballSavant.com's pitchFX search tool.
 
(function(d) {
for (var i = 1; i <= 9; i++) {
if (d.getElementById('chk_z_' + i)) {
d.getElementById('chk_z_' + i).checked=false;
}
}
for (var i = 11; i <= 14; i++) {
if (d.getElementById('chk_z_' + i)) {
View gist:11156889
1 2 3 4 5
window.onload = function () {
if($('#header-ad').height() === 0) {
$('.content-left').prepend("<div class='update-box'><p class='xtra'><b>Hey, ad blocker user!</b> Do you mind white listing my site? You can also <a href='http://www.impressivewebs.com/384-pages-of-css/'>buy one of my e-books</a> to show your support. Thanks!</p></div>");
}
};
View SassMeister-input.scss
1 2 3 4 5 6 7 8 9
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
 
$cache-size: (
'width' : (),
'height' : ()
);
View SassMeister-input.scss
1 2 3 4 5 6 7 8 9 10
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
 
%example {
color: blue;
font-weight: bold;
font-size: 2em;
}
View SassMeister-input.scss
1 2 3 4 5 6 7 8 9 10
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----
 
.step__item {
counter-increment: steps; /* 1 */
background: $step-background-color;
float: left;
padding: $step-baseline 0;
View SassMeister-input.scss
1 2 3 4 5 6 7 8 9 10
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// Bootstrap Sass (v3.1.1.0)
// ----
 
@import "bootstrap";
 
// Author Bio and Author Name are just Bootstrap .row elements
.author-bio,
Something went wrong with that request. Please try again.