CSS Media Query Sizes

CSS MEDIA QUERY

Smartphones (portrait and landscape)

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
{ /* Styles */ }

Smartphones (landscape)

@media only screen 
and (min-width : 321px)
{ /* Styles */ }

Smartphones (portrait)

@media only screen 
and (max-width : 320px)
{ /* Styles */ }

iPads (portrait and landscape)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
{ /* Styles */ }

iPads (landscape)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
{ /* Styles */ }

iPads (portrait)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
{ /* Styles */ }

Desktops and laptops

@media only screen 
and (min-width : 1224px)
{ /* Style }

Large screens

@media only screen 
and (min-width : 1824px)
{ /* Styles */ }

iPhone 4

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{ /* Styles */ }

Center List Items from a Div

Center List Items from a Div

<div id="menu-outer"> <div class="table"> <ul id="horizontal-list"> <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li> <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li> <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li> <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li> </ul> </div> </div> 
		
	#menu-outer {
		height: 84px;
		background: url(images/bar-bg.jpg) repeat-x;
	}

	.table {
		display: table;   /* Allow the centering to work */
		margin: 0 auto;
	}

	ul#horizontal-list {
		min-width: 696px;
		list-style: none;
		padding-top: 20px;
		}
		ul#horizontal-list li {
			display: inline;
		}

Read Directory + Array/For Loop/For Each

Read Directory + Array/For Loop/For Each

$array = array("array1","array2","array3"); $dir = "'images/content"; foreach ($array as $gallery) { echo "<div id='maximage_$gallery'>"; // Open a directory, and read its contents if (is_dir($dir)){ if ($dh = opendir($dir)){ while (($file = readdir($dh)) !== false){ //echo "filename:" . $file . "<br>"; echo "<img src='images/bg/$gallery/$file'/>"; } closedir($dh); } } echo "</div>"; echo "</br>"; } for ($x=0; $x<=10; $x++) { echo "The number is: $x <br>"; }

Overriding The Default Text Selection Color With CSS

Overriding The Default Text Selection Color With CSS

	
	::selection {
	  background: #ffb7b7; /* WebKit/Blink Browsers */
	}
	::-moz-selection {
	  background: #ffb7b7; /* Gecko Browsers */
	}
p.red::selection { background: #ffb7b7; } p.red::-moz-selection { background: #ffb7b7; } p.blue::selection { background: #a8d1ff; } p.blue::-moz-selection { background: #a8d1ff; } p.yellow::selection { background: #fff2a8; } p.yellow::-moz-selection { background: #fff2a8; }

Delete Extra Printers in the Registry

Delete Extra Printers in the Registry

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsNT\CurrentVersion\Print\Printers
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Windows

Disable the Quick Blinking Effect

Disable the quick blinking effect

webkit-tap-highlight-color: rgba(0,0,0,0);

Helvetica Arabic Fonts

Helvetica Arabic Fonts

@font-face {
  font-family: "HelveticaNeueLTW20-Light";
  src: url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Light.eot?iefix") format("eot");
}
@font-face {
  font-family: "HelveticaNeueLTW20-Light";
  src: url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Light.eot?iefix");
  src: url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Light.woff") format("woff"), 
  url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Light.ttf") format("truetype"), 
  url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Light.svg#HelveticaNeueLTW20-Light") format("svg");
}
@font-face {
  font-family: "HelveticaNeueLTW20-Roma";
  src: url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Roma.eot?iefix") format("eot");
}
@font-face {
  font-family: "HelveticaNeueLTW20-Roma";
  src: url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Roma.eot?iefix");
  src: url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Roma.woff") format("woff"), 
  url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Roma.ttf") format("truetype"), 
  url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Roma.svg#HelveticaNeueLTW20-Roma") format("svg");
}
@font-face {
  font-family: "HelveticaNeueLTW20-Bold";
  src: url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Bold.eot?iefix") format("eot");
}
@font-face {
  font-family: "HelveticaNeueLTW20-Bold";
  src: url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Bold.eot?iefix");
  src: url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Bold.woff") format("woff"), 
  url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Bold.ttf") format("truetype"), 
  url("../typeface/HelveticaNeueLTW20/HelveticaNeueLTW20-Bold.svg#HelveticaNeueLTW20-Bold") format("svg");
}