Skip to content
javascript:void((function(d){d.querySelector('.CodeMirror-gutter').style.display='none';})(document));
javascript:void((function(d){h=d.createElement('script');h.src='//cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.1/html-inspector.js';d.body.appendChild(h);})(document));

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;
    }
}
// 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)) {
// 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)) {
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>");
}
};
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
$cache-size: (
'width' : (),
'height' : ()
);
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----
%example {
color: blue;
font-weight: bold;
font-size: 2em;
}
// ----
// 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;
// ----
// 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.