KM WebKit Targeting Media Query Shared by Kevin Mandeville, 2015-08-19 02:15:37 Tagged: Media Query, WebKit 1 Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} } View this Snippet
KM Firefox Targeting Media Query (for Thunderbird) Shared by Kevin Mandeville, 2015-08-18 15:00:56 Tagged: Media Query, All Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @-moz-document url-prefix() { {style} } View this Snippet
CB Generic Styles for Mobile Hide/Show/Full-Width Shared by Charles Balazs, 2016-03-03 22:57:24 Tagged: Media Query, All 1 Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet .mobile-only { display: none; max-height: 0px; mso-hide: all; overflow: hidden; visibility: hidden; } @media only screen and (max-device-width: {width}px), only screen and (max-width: {width}px) { *[class~="mobile-only"] { display: block !important; max-height: none !important; overflow: visible !important; visibility: visible !important; } *[class~="mobile-hide"] { display: none !important; height: 0 !important; margin: 0 !important; max-height: 0 !important; overflow: hidden !important; padding: 0 !important; visibility: hidden !important; width: 0 !important; } *[class~="mobile-expanding"] { /* for elements that you don't want to treat as block elements */ clear: both !important; float: none !important; width: 100% !important; } *[class~="mobile-block-full-width"] { clear: both !important; display: block !important; float: none !important; height: auto !important; width: 100% !important; } } View this Snippet
KM iPad 1 & 2 + iPad Mini Media Query Shared by Kevin Mandeville, 2015-08-19 12:40:51 Tagged: Media Query, iPad Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} } View this Snippet
KM iPad 3 & 4 Media Query Shared by Kevin Mandeville, 2015-08-19 12:41:16 Tagged: Media Query, iPad Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} } View this Snippet
KM iPhone 2G/3G/3GS Media Query Shared by Kevin Mandeville, 2015-08-19 12:41:44 Tagged: Media Query, iPhone Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} } View this Snippet
KM iPhone 4/4S/5/iPhone 6 (zoom view) Media Query Shared by Kevin Mandeville, 2015-08-19 12:42:37 Tagged: Media Query, iPhone Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} } View this Snippet
KM HTC ONE + Samsung Galaxy S4/S5 Media Query Shared by Kevin Mandeville, 2015-08-19 12:43:13 Tagged: Media Query, WebKit Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} } View this Snippet
KM iPhone 6 (standard view) + iPhone 6 Plus (zoom view) Media Query Shared by Kevin Mandeville, 2015-08-19 12:45:05 Tagged: Media Query, iPhone 1 Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} } View this Snippet
KM iPhone 6 Plus (standard view) Media Query Shared by Kevin Mandeville, 2015-08-19 12:44:54 Tagged: Media Query, iPhone 1 Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} } View this Snippet
KM Yahoo! Mail Targeting Media Query Shared by Kevin Mandeville, 2015-08-19 15:34:27 Tagged: Media Query, Yahoo! Mail Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media yahoo { {style} } View this Snippet
SM Mobile Column Stacking and Show/Hide across all clients Shared by Steven Mansfield, 2017-04-18 12:15:07 Tagged: Media Query, All Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet /*Only executes the following code when screen size is below 599*/ @media only screen and (max-width: 599px) { } td[class="hide-on-mobile"] { display: none!important; /* Generic*/ max-height:0!important; /* Gmail*/ mso-hide:all!important; /* Outlook clients*/ overflow:hidden!important; /* Generic */ visibility: hidden!important; /* Generic */ } /*When using show-on-mobile make sure Inline styles are as above without !important*/ td[class="show-on-mobile"] { width:100%!important; display: block!important; max-height: inherit!important; overflow: visable!important; mso-hide: none !important; } /*Stack on Mobile STANDARD - Will stack 2 columns on top of each other*/ td[class="stack-column"] { display: block !important; width: 100% !important; direction: ltr !important; border-left: 0px !important; } /*Stack Right Column on top of Left Mobile - Assign Right td mailCol and Left td subCol*/ td[class="mainCol"] { display: table-header-group; width: 100% !important; float: none !important; margin: 0 auto; height: auto !important; } td[class="subCol"] { display: table-footer-group; width: 100% !important; float: none !important; margin: 0 auto; height: auto !important; } } View this Snippet
KM Gmail Mobile Targeting Shared by Kevin Mandeville, 2018-03-12 17:06:14 Tagged: Media Query, Gmail Snippet Trigger Manage Snippets Please enter a valid trigger The text that, when typed and followed by a tab will trigger the insertion of the snippet code. Added to your library. Manage your snippets. Copied to Clipboard Your snippet is out of date. Update snippet @media screen and (max-width: 480px) { u ~ div .foo { /* INSERT CSS HERE */ } } View this Snippet
