Linkblock nachrutschen

[jakestyler]

Hallo :)
Ich hab auf meiner Seite einen Linkblock:

<a href="clearapp://task/create?listName=ToDo&taskName=ToDo">ToDo</a><a href="launchtimer://quick">Timer</a><a href="ihandyflashlightledpro://" class="iphone4">Flashlight</a><a href="brightness://" class="iphone4">Brightness</a><a href="mirror://" >Mirror</a><a href="/start/music.html">Music</a><a href="/start/cam.html">Camera</a>
<a href="/start/info.html">Info</a>

Die beiden Links die mit class="iphone4" bezeichnet sind, sollen bei iPhone 4/S 3G/S und 2G rausfallen, allerdings auf dem iPhone 5 angezeigt werden.
Soweit habe ich es schon geschafft:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { 
 
 a.iphone4 {
		display:none;
	}
	
}
   




@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
  
   a.iphone4 {
		visibility:visible;
	}


}

Das Problem ist jetzt, dass die Links nicht einfach nachrutschen, sondern eine weiße Stelle bleibt:

Wie verändere ich das jetzt, dass die Links nachrutschen? :)


Danke schonmal! :)

 

[Tronjer]

Um ein HTML-Element komplett aus- und einzublenden, verwendet man display:none und display:block. Dabei würden dann die darunter stehenden Elemente nach oben rutschen. Will man es nur sichtbar und unsichtbar machen, dann nimmt man visibility:visible und visibility:hidden. Dabei ergibt sich ein Abstand zu den unteren Elementen.

Du verwendest in deinen Media-Querys eine Kombination aus beiden Attributen.