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

Similar Threads
thread Thread Starter Forum Replies Last Post
Install a Retina Display on Pre-Retina MacBook Pro 13? Capulet MacBook Pro 14 Sep 21, 2014 02:47 PM
iPod Touch 4th Gen Retina vs. iPhone Retina Display, Are they different? falconman515 iPod touch 13 Nov 28, 2012 02:31 AM
Need help testing an Retina Macbook Pro bug! s4yunkim MacBook Pro 0 Aug 30, 2012 10:08 PM
Retina Display- Will it ruin non-retina games and apps? pkessler MacBook Pro 11 Jun 12, 2012 11:01 AM

Forum Jump

All times are GMT -5. The time now is 04:37 PM.

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

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