Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

 
 
Thread Tools Search this Thread Display Modes
Prev Previous Post   Next Post Next
Old Dec 8, 2012, 05:44 AM   #1
olup
macrumors regular
 
Join Date: Oct 2011
testing retina display media queries

I made an image sprite for some icons for a band's website that includes bigger icons for high resolution displays.

While the normal icons load fine and are valid css, the retina/high resolution icons don't apparently. I came across this snippet here to make it work, but it doesn't validate nor work. http://css-tricks.com/snippets/css/r...y-media-query/Here's the code:

Code:
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and ( -moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
	.social a{
		background-image: url(../images/logos/sprites.png);
		background-repeat:no-repeat;
		display:block;
		height:100px;
		text-indent:-9999em;
		width:100px;
	}
	.facebook {
		background-position:0 -120px;
	}
	.facebook:focus,.facebook:hover {
		background-position:0 -220px;
	}
	.youtube {
		background-position:-130px -120px;
	}
	.youtube:focus,.youtube:hover {
		background-position:-130px -220px;
	}
	.twitter {
		background-position:-220px -120px;
	}
	.twitter:focus,.twitter:hover {
		background-position:-220px -220px;
	}
	.bandcamp {
		background-position:-310px -120px;
	}
	.bandcamp:focus,.bandcamp:hover {
		background-position:-310px -220px;
	}

}
I'm completely shooting in the dark here, since I don't have an appropriate device to test on. How can I fix this?
Any help would be greatly appreciated.

Last edited by olup; Feb 25, 2013 at 08:58 AM. Reason: Please use code tags
olup is offline   0 Reply With Quote

 
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 02:50 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC