Media Queries on Crack
How do I make an media queries on crack?
What is a media queries on crack? How do you make a media queries on crack? This script and codes were developed by David A. on 28 November 2022, Monday.
Media Queries on Crack Previews
Media Queries on Crack - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Media Queries on Crack</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>sensible demo</h1>
<h3><a target="blank" href="https://github.com/meodai/sensible/">https://github.com/meodai/sensible/</a></h3>
<h3><a target="blank" href="https://codepen.io/meodai/pen/kzwAy?editors=011">View on codepen</a></h3>
<h2>sensible grid</h2>
<div class="l-grid grid-demo"> <div class="l-grid-cell l-one-whole l-mobile-one-whole"> </div> <div class="l-grid-cell l-one-half l-mobile-one-whole"> </div> <div class="l-grid-cell l-one-half l-mobile-one-whole"> </div> <div class="l-grid-cell l-one-third l-mobile-one-whole"> </div> <div class="l-grid-cell l-two-thirds l-mobile-one-whole"> </div> <div class="l-grid-cell l-one-quarter l-mobile-one-whole"> </div> <div class="l-grid-cell l-three-quarters l-mobile-one-whole"> </div> <div class="l-grid-cell l-one-quarter l-mobile-one-whole"> </div> <div class="l-grid-cell l-one-quarter l-mobile-one-whole"> </div> <div class="l-grid-cell l-one-quarter l-mobile-one-whole"> </div> <div class="l-grid-cell l-one-quarter l-mobile-one-whole"> </div>
</div>
<h2>sensible visibility</h2>
<div class="l-grid visibilty-demo"> <div class="l-grid-cell l-one-quarter">current breakpoint</div> <div class="l-grid-cell l-one-quarter mobile-header"><span>mobile</span></div> <div class="l-grid-cell l-one-quarter tablet-header"><span>tablet</span></div> <div class="l-grid-cell l-one-quarter desktop-header"><span>desktop</span></div> <div class="l-grid-cell l-one-quarter"><span>visible only on:</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-visible-only-mobile">x</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-visible-only-tablet">x</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-visible-only-desktop">x</span></div> <div class="l-grid-cell l-one-quarter"><span>hidden only on:</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-hidden-only-mobile">x</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-hidden-only-tablet">x</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-hidden-only-desktop">x</span></div> <div class="l-grid-cell l-one-quarter"><span>hidden on:</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-hidden-mobile">x</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-hidden-tablet">x</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-hidden-desktop">x</span></div> <div class="l-grid-cell l-one-quarter"><span>visible on:</span></div> <div class="l-grid-cell l-one-quarter"><span class="is-visible-mobile">x </span></div> <div class="l-grid-cell l-one-quarter"><span class="is-visible-tablet">x </span></div> <div class="l-grid-cell l-one-quarter"><span class="is-visible-desktop">x </span></div>
</div>
<h2>sebsible mediaQuery.js</h2>
<div class="js-debug">debug</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/meodai/sensible/master/mediaQuery.js'></script> <script src="js/index.js"></script>
</body>
</html>
Media Queries on Crack - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.js-breakpoint { content: '{"mobile-portrait":"only screen and (max-width:400px)","mobile":"only screen and (max-width:740px)","not-mobile":"only screen and (min-width:741px)","only-mobile":"only screen and (max-width:740px)","tablet-portrait":"only screen and (max-width:850px)","tablet":"only screen and (max-width:1050px)","only-tablet":"only screen and (min-width:741px) and (max-width:1051px)","not-tablet":"only screen and (min-width:1051px)","desktop":"only screen and (min-width:1051px)","only-desktop":"only screen and (min-width:1051px)","retina":"only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)","highres":"print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)","print":"print"}';
}
/*! * 0. false will set the grid elements to inline-block if true flexbox * 1. size of the gutter between the cols * 2. the gutter between the columns can be padding or margin * 3. the gutter can be on the right or the left side of every col * 4. Provides additional classes for the grid in order have different available gutter sizes * 5. Base font size used for the in-line-block gap fix: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ * 6. Slug used for the grid classes (l- for SMACSS layout), empty string for no slug * 7. If set to true, one push class per with will be available (margin-left) * 8. Generated col names & withs * 9. Breakpoints used in the grid (ideally reduced to a minimum) */
.l-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -20px;
}
.l-grid .l-grid-cell { margin-right: 20px; display: block;
}
.l-grid--no-gap { margin-right: 0;
}
.l-grid--no-gap .l-grid-cell { margin-right: 0;
}
.l-grid--double { margin-right: -40px;
}
.l-grid--double .l-grid-cell { margin-right: 40px;
}
.l-grid--triple { margin-right: -60px;
}
.l-grid--triple .l-grid-cell { margin-right: 60px;
}
.l-grid--gapped > .l-grid-cell { margin-bottom: 20px;
}
.l-grid-cell { display: inline-block; vertical-align: top; box-sizing: border-box;
}
.l-one-whole { width: 100%;
}
.l-one-half { width: 50%;
}
.l-one-quarter { width: 25%;
}
.l-three-quarters { width: 75%;
}
.l-one-third { width: 33.333%;
}
.l-two-thirds { width: 66.666%;
}
.l-one-fifth { width: 20%;
}
.l-four-fifths { width: 80%;
}
.l-one-sixth { width: 16.666%;
}
.l-five-sixths { width: 83.333%;
}
.l-grid > .l-one-whole { width: calc(100% - 20px);
}
.l-grid > .l-one-half { width: calc(50% - 20px);
}
.l-grid > .l-one-quarter { width: calc(25% - 20px);
}
.l-grid > .l-three-quarters { width: calc(75% - 20px);
}
.l-grid > .l-one-third { width: calc(33.333% - 20px);
}
.l-grid > .l-two-thirds { width: calc(66.666% - 20px);
}
.l-grid > .l-one-fifth { width: calc(20% - 20px);
}
.l-grid > .l-four-fifths { width: calc(80% - 20px);
}
.l-grid > .l-one-sixth { width: calc(16.666% - 20px);
}
.l-grid > .l-five-sixths { width: calc(83.333% - 20px);
}
@media only screen and (min-width: 1051px) { .l-not-tablet-one-whole { width: 100%; } .l-not-tablet-one-half { width: 50%; } .l-not-tablet-one-quarter { width: 25%; } .l-not-tablet-three-quarters { width: 75%; } .l-not-tablet-one-third { width: 33.333%; } .l-not-tablet-two-thirds { width: 66.666%; } .l-not-tablet-one-fifth { width: 20%; } .l-not-tablet-four-fifths { width: 80%; } .l-not-tablet-one-sixth { width: 16.666%; } .l-not-tablet-five-sixths { width: 83.333%; } .l-grid > .l-not-tablet-one-whole { width: calc(100% - 20px); } .l-grid > .l-not-tablet-one-half { width: calc(50% - 20px); } .l-grid > .l-not-tablet-one-quarter { width: calc(25% - 20px); } .l-grid > .l-not-tablet-three-quarters { width: calc(75% - 20px); } .l-grid > .l-not-tablet-one-third { width: calc(33.333% - 20px); } .l-grid > .l-not-tablet-two-thirds { width: calc(66.666% - 20px); } .l-grid > .l-not-tablet-one-fifth { width: calc(20% - 20px); } .l-grid > .l-not-tablet-four-fifths { width: calc(80% - 20px); } .l-grid > .l-not-tablet-one-sixth { width: calc(16.666% - 20px); } .l-grid > .l-not-tablet-five-sixths { width: calc(83.333% - 20px); }
}
@media only screen and (max-width: 1050px) { .l-tablet-one-whole { width: 100%; } .l-tablet-one-half { width: 50%; } .l-tablet-one-quarter { width: 25%; } .l-tablet-three-quarters { width: 75%; } .l-tablet-one-third { width: 33.333%; } .l-tablet-two-thirds { width: 66.666%; } .l-tablet-one-fifth { width: 20%; } .l-tablet-four-fifths { width: 80%; } .l-tablet-one-sixth { width: 16.666%; } .l-tablet-five-sixths { width: 83.333%; } .l-grid > .l-tablet-one-whole { width: calc(100% - 20px); } .l-grid > .l-tablet-one-half { width: calc(50% - 20px); } .l-grid > .l-tablet-one-quarter { width: calc(25% - 20px); } .l-grid > .l-tablet-three-quarters { width: calc(75% - 20px); } .l-grid > .l-tablet-one-third { width: calc(33.333% - 20px); } .l-grid > .l-tablet-two-thirds { width: calc(66.666% - 20px); } .l-grid > .l-tablet-one-fifth { width: calc(20% - 20px); } .l-grid > .l-tablet-four-fifths { width: calc(80% - 20px); } .l-grid > .l-tablet-one-sixth { width: calc(16.666% - 20px); } .l-grid > .l-tablet-five-sixths { width: calc(83.333% - 20px); }
}
@media only screen and (max-width: 850px) { .l-tablet-portrait-one-whole { width: 100%; } .l-tablet-portrait-one-half { width: 50%; } .l-tablet-portrait-one-quarter { width: 25%; } .l-tablet-portrait-three-quarters { width: 75%; } .l-tablet-portrait-one-third { width: 33.333%; } .l-tablet-portrait-two-thirds { width: 66.666%; } .l-tablet-portrait-one-fifth { width: 20%; } .l-tablet-portrait-four-fifths { width: 80%; } .l-tablet-portrait-one-sixth { width: 16.666%; } .l-tablet-portrait-five-sixths { width: 83.333%; } .l-grid > .l-tablet-portrait-one-whole { width: calc(100% - 20px); } .l-grid > .l-tablet-portrait-one-half { width: calc(50% - 20px); } .l-grid > .l-tablet-portrait-one-quarter { width: calc(25% - 20px); } .l-grid > .l-tablet-portrait-three-quarters { width: calc(75% - 20px); } .l-grid > .l-tablet-portrait-one-third { width: calc(33.333% - 20px); } .l-grid > .l-tablet-portrait-two-thirds { width: calc(66.666% - 20px); } .l-grid > .l-tablet-portrait-one-fifth { width: calc(20% - 20px); } .l-grid > .l-tablet-portrait-four-fifths { width: calc(80% - 20px); } .l-grid > .l-tablet-portrait-one-sixth { width: calc(16.666% - 20px); } .l-grid > .l-tablet-portrait-five-sixths { width: calc(83.333% - 20px); }
}
@media only screen and (min-width: 741px) { .l-not-mobile-one-whole { width: 100%; } .l-not-mobile-one-half { width: 50%; } .l-not-mobile-one-quarter { width: 25%; } .l-not-mobile-three-quarters { width: 75%; } .l-not-mobile-one-third { width: 33.333%; } .l-not-mobile-two-thirds { width: 66.666%; } .l-not-mobile-one-fifth { width: 20%; } .l-not-mobile-four-fifths { width: 80%; } .l-not-mobile-one-sixth { width: 16.666%; } .l-not-mobile-five-sixths { width: 83.333%; } .l-grid > .l-not-mobile-one-whole { width: calc(100% - 20px); } .l-grid > .l-not-mobile-one-half { width: calc(50% - 20px); } .l-grid > .l-not-mobile-one-quarter { width: calc(25% - 20px); } .l-grid > .l-not-mobile-three-quarters { width: calc(75% - 20px); } .l-grid > .l-not-mobile-one-third { width: calc(33.333% - 20px); } .l-grid > .l-not-mobile-two-thirds { width: calc(66.666% - 20px); } .l-grid > .l-not-mobile-one-fifth { width: calc(20% - 20px); } .l-grid > .l-not-mobile-four-fifths { width: calc(80% - 20px); } .l-grid > .l-not-mobile-one-sixth { width: calc(16.666% - 20px); } .l-grid > .l-not-mobile-five-sixths { width: calc(83.333% - 20px); }
}
@media only screen and (max-width: 740px) { .l-mobile-one-whole { width: 100%; } .l-mobile-one-half { width: 50%; } .l-mobile-one-quarter { width: 25%; } .l-mobile-three-quarters { width: 75%; } .l-mobile-one-third { width: 33.333%; } .l-mobile-two-thirds { width: 66.666%; } .l-mobile-one-fifth { width: 20%; } .l-mobile-four-fifths { width: 80%; } .l-mobile-one-sixth { width: 16.666%; } .l-mobile-five-sixths { width: 83.333%; } .l-grid > .l-mobile-one-whole { width: calc(100% - 20px); } .l-grid > .l-mobile-one-half { width: calc(50% - 20px); } .l-grid > .l-mobile-one-quarter { width: calc(25% - 20px); } .l-grid > .l-mobile-three-quarters { width: calc(75% - 20px); } .l-grid > .l-mobile-one-third { width: calc(33.333% - 20px); } .l-grid > .l-mobile-two-thirds { width: calc(66.666% - 20px); } .l-grid > .l-mobile-one-fifth { width: calc(20% - 20px); } .l-grid > .l-mobile-four-fifths { width: calc(80% - 20px); } .l-grid > .l-mobile-one-sixth { width: calc(16.666% - 20px); } .l-grid > .l-mobile-five-sixths { width: calc(83.333% - 20px); }
}
@media only screen and (max-width: 400px) { .l-mobile-portrait-one-whole { width: 100%; } .l-mobile-portrait-one-half { width: 50%; } .l-mobile-portrait-one-quarter { width: 25%; } .l-mobile-portrait-three-quarters { width: 75%; } .l-mobile-portrait-one-third { width: 33.333%; } .l-mobile-portrait-two-thirds { width: 66.666%; } .l-mobile-portrait-one-fifth { width: 20%; } .l-mobile-portrait-four-fifths { width: 80%; } .l-mobile-portrait-one-sixth { width: 16.666%; } .l-mobile-portrait-five-sixths { width: 83.333%; } .l-grid > .l-mobile-portrait-one-whole { width: calc(100% - 20px); } .l-grid > .l-mobile-portrait-one-half { width: calc(50% - 20px); } .l-grid > .l-mobile-portrait-one-quarter { width: calc(25% - 20px); } .l-grid > .l-mobile-portrait-three-quarters { width: calc(75% - 20px); } .l-grid > .l-mobile-portrait-one-third { width: calc(33.333% - 20px); } .l-grid > .l-mobile-portrait-two-thirds { width: calc(66.666% - 20px); } .l-grid > .l-mobile-portrait-one-fifth { width: calc(20% - 20px); } .l-grid > .l-mobile-portrait-four-fifths { width: calc(80% - 20px); } .l-grid > .l-mobile-portrait-one-sixth { width: calc(16.666% - 20px); } .l-grid > .l-mobile-portrait-five-sixths { width: calc(83.333% - 20px); }
}
@media print { .l-print-one-whole { width: 100%; } .l-print-one-half { width: 50%; } .l-print-one-quarter { width: 25%; } .l-print-three-quarters { width: 75%; } .l-print-one-third { width: 33.333%; } .l-print-two-thirds { width: 66.666%; } .l-print-one-fifth { width: 20%; } .l-print-four-fifths { width: 80%; } .l-print-one-sixth { width: 16.666%; } .l-print-five-sixths { width: 83.333%; } .l-grid > .l-print-one-whole { width: calc(100% - 20px); } .l-grid > .l-print-one-half { width: calc(50% - 20px); } .l-grid > .l-print-one-quarter { width: calc(25% - 20px); } .l-grid > .l-print-three-quarters { width: calc(75% - 20px); } .l-grid > .l-print-one-third { width: calc(33.333% - 20px); } .l-grid > .l-print-two-thirds { width: calc(66.666% - 20px); } .l-grid > .l-print-one-fifth { width: calc(20% - 20px); } .l-grid > .l-print-four-fifths { width: calc(80% - 20px); } .l-grid > .l-print-one-sixth { width: calc(16.666% - 20px); } .l-grid > .l-print-five-sixths { width: calc(83.333% - 20px); }
}
/* responsive visibilty */
/** * remove removes element from list returns the others */
/** * mixin responsive-visibility * $visibility-breakpoints {[list]} list of breakpoints you want to interact with * $overwrite {[boolean]} if set true will generate classes that overwrite what ever visibility is active on that element * * exact: * @include responsive-visibility("only-mobile" "only-tablet" "only-desktop", true); * * up: * @include responsive-visibility("mobile" "tablet" "desktop", false); */
@media only screen and (max-width: 740px) { .is-visible-only-mobile { display: block !important; visibility: visible; } .is-visible-only-mobile--inline { display: inline; } .is-visible-only-mobile--inline-block { display: inline-block; } .is-hidden-only-mobile, .is-visible-only-tablet, .is-visible-only-desktop { display: none !important; visibility: hidden; }
}
@media only screen and (min-width: 741px) and (max-width: 1051px) { .is-visible-only-tablet { display: block !important; visibility: visible; } .is-visible-only-tablet--inline { display: inline; } .is-visible-only-tablet--inline-block { display: inline-block; } .is-hidden-only-tablet, .is-visible-only-mobile, .is-visible-only-desktop { display: none !important; visibility: hidden; }
}
@media only screen and (min-width: 1051px) { .is-visible-only-desktop { display: block !important; visibility: visible; } .is-visible-only-desktop--inline { display: inline; } .is-visible-only-desktop--inline-block { display: inline-block; } .is-hidden-only-desktop, .is-visible-only-mobile, .is-visible-only-tablet { display: none !important; visibility: hidden; }
}
@media only screen and (max-width: 740px) { .is-visible-mobile { display: block !important; visibility: visible; } .is-visible-mobile--inline { display: inline; } .is-visible-mobile--inline-block { display: inline-block; } .is-hidden-mobile { display: none !important; visibility: hidden; }
}
@media only screen and (max-width: 1050px) { .is-visible-tablet { display: block !important; visibility: visible; } .is-visible-tablet--inline { display: inline; } .is-visible-tablet--inline-block { display: inline-block; } .is-hidden-tablet { display: none !important; visibility: hidden; }
}
@media only screen and (min-width: 1051px) { .is-visible-desktop { display: block !important; visibility: visible; } .is-visible-desktop--inline { display: inline; } .is-visible-desktop--inline-block { display: inline-block; } .is-hidden-desktop { display: none !important; visibility: hidden; }
}
/* DEMO Spesific CSS*/
body { padding: 20px; font-family: 'Roboto', sans-serif; font-size: 12px; background: #3b3f45; color: #fff; border: 20px solid white;
}
a { color: #fff;
}
h1 { font-size: 40px; margin: 0 0 1.5rem; line-height: 1;
}
h2 { text-transform: uppercase; margin: 1.5rem 0;
}
.visibilty-demo .l-grid-cell span { color: rgba(250, 100, 100, 0.8);
}
@media only screen and (max-width: 740px) { .mobile-header { background: rgba(250, 100, 100, 0.8); } .mobile-header span { color: #fff !important; }
}
@media only screen and (min-width: 741px) and (max-width: 1051px) { .tablet-header { background: rgba(250, 100, 100, 0.8); } .tablet-header span { color: #fff !important; }
}
@media only screen and (min-width: 1051px) { .desktop-header { background: rgba(250, 100, 100, 0.8); } .desktop-header span { color: #fff !important; }
}
.js-debug { padding: 20px; margin-bottom: 20px; background: rgba(250, 100, 100, 0.8);
}
.l-grid-cell { position: relative; padding: 20px; margin-bottom: 20px;
}
.grid-demo .l-grid-cell:after { content: attr(class); position: absolute; padding: 20px; top: 0; right: 0; bottom: 0; left: 0; background: rgba(200, 200, 200, 0.5);
}
.is-visible-mobile { display: none;
}
Media Queries on Crack - Script Codes JS Codes
var $debug = $(".js-debug");
mediaQuery.onEnter('mobile tablet', function(querry){ console.log('enter mobile & tablet:', querry); $debug.text('you are now on ' + querry);
},true);
mediaQuery.onLeave('mobile tablet', function(querry){ console.log('leave moble:',querry); $debug.text('you just left ' + querry);
});
console.log( "is mobile:", mediaQuery.is('mobile') );
console.log( "is not mobile:", mediaQuery.isNot('mobile') );
| Developer | David A. |
| Username | meodai |
| Uploaded | November 28, 2022 |
| Rating | 3 |
| Size | 8,319 Kb |
| Views | 20,240 |
Do you need developer help for Media Queries on Crack?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
David A. (meodai) Script Codes
| Name | Size |
| Trippy perlin | 3,161 Kb |
| We Simplify animation | 48,169 Kb |
| Cubehelix ticktack.js | 5,643 Kb |
| DOM explosions | 8,919 Kb |
| Pijama ninja falling | 5,513 Kb |
| Animated scroll timeline | 5,222 Kb |
| Better Grrif Player | 8,512 Kb |
| Different centering methods | 7,504 Kb |
| Social color-namer | 6,112 Kb |
| Pseudo 3d css clouds | 5,199 Kb |
Create amazing marketing copy with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Apex Calculator | Michaelwnelson | 2,370 Kb |
| Toolbar | Onsen | 5,414 Kb |
| Another brick in the wall | Fivera | 1,955 Kb |
| Collapsing Widget | Er40 | 4,279 Kb |
| SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
| We Simplify animation | Meodai | 48,169 Kb |
| Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
| React Vote Component | Souporserious | 5,465 Kb |
| Twitch API | Coderpilot | 3,412 Kb |
| Ball Physics | Getsetbro | 3,149 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!