CSS conflict

Door Joep - op 22-12-2013 13:26

1.644 views

Hallo allemaal,
de css op mijn site werkt niet helemaal vlekkeloos,
zodra ik hem op een iPad open worden er dingen verborgen die wel weergegeven moeten worden,
waardoor er bijvoorbeeld wel een menubalk is, maar geen inhoud.

Het conflict bevindt zich in de head:


	<link rel="stylesheet" media="screen and (min-width: 925px)" href="../../style.css"/>
	<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 925px)" href="../../stylemid.css"/>
	<link rel="stylesheet" media="screen and (max-width: 600px)" href="../../stylesmall.css"/>
	<link rel="stylesheet" media="screen and (device-aspect-ratio: 2/3)" href="../../stylesmall.css"/>
	<link rel="stylesheet" media="screen and (device-aspect-ratio: 40/71)" href="../../stylesmall.css"/>
	<link rel="stylesheet" media="screen and (device-aspect-ratio: 3/4)" href="../../stylesmall.css"/>

Ik kom er alleen niet uit.
De onderste 3 zijn voor iPhone, iPhone 5 en iPad.

Toevoeging op 22/12/2013 13:32:30:

Het gaat om: Joep4U.com

Machiel K

22-12-2013 16:56

Ik zou het anders aanpakken.

In je .css file, bijvoorbeeld responsive.css, zet je het volgende. En 600px vervangen je dan door de gewenste waarde:


@media (max-width: 600px) {

}

Vervolgens in je index.php/index.html:


<head>
	<title> ... </title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
	<link type="text/css" rel="stylesheet" href="/normaal.css" media="screen" />
	<link type="text/css" rel="stylesheet" href="/responsive.css" media="screen" />
</head>

Ik heb zelf responsive.css als een appart bestandje. Dit geeft voor mijzelf wat meer overzicht.
De <meta name="viewport" ..... /> zorgt ervoor dat de website zich aanpast aan de breedte van het scherm.

Reageren

Inloggen om te reageren