Layout verkeerd bij mobiel openen.

[petje11]

Hallo,

Mijn moeder heeft een website waarvan de hele layout niet goed werkt op een mobiel apparaat.
Als je de website opent met een tablet of een mobieltje dan staat de tekst niet meer bij de goede foto.
Wat is hier (simpel) aan te doen?

Bvd, petje11

 

[lucky1]

Het lijkt erop dat de elementen te breed zijn waardoor de browser mee gaat denken.
Ik zie namelijk dat een aantal afbeeldingen verschuiven, waardoor de namen verkeerd lijken te staan.
Mogelijk kun je een div om alle links zetten en deze een vaste breedte geven?

 

[petje11]

En hoe doe ik dat? Ik heb helemaal geen verstand van websites.
Kun je een voorbeeldje geven?

 

[lucky1]

Bij deze een voorbeeld hou je het op zou kunnen lossen.

Ik zou de HTML structuur als volgt opbouwen:

<div class="images">
	<div class="image">
		<div class="image-wrapper">
			<a href="mailto:maja@jacobs-online.nl"><img width="290" height="380" title="Dochter van Peter Zuurveld en Aaltje van Bijsteren" alt="marian zuurveld" src="afbeeldingen/marian_2011.jpg"></a>
		</div>
		<div class="name">Marian Zuurveld</div>
	</div>
	<div class="spacer">&nbsp;</div>
	<div class="image">
		<div class="image-wrapper">
			<img width="290" height="380" title="Zoon van Cor Jacobs en Emma Ohm" alt="wilber jacobs" src="afbeeldingen/wilber_2011.jpg">
		</div>
		<div class="name">Wilber Jacobs †</div>
	</div>
	<div class="spacer">&nbsp;</div>
	<div class="image">
		<div class="image-wrapper">
			<img width="290" height="380" title="Dochter van Wilber Jacobs en Marian Zuurveld" alt="inge jacobs" src="afbeeldingen/inge_2011.jpg">
		</div>			
		<div class="name">Inge Jacobs</div>
	</div>
</div>

Je zou met CSS de volgende regels erop los kunnen laten:

div.images
{
	width: 1210px;
	margin: 0px auto 0px auto;
}

div.images div.image
{
	height: 450px;
	width: 290px;

	float: left;
	clear: none;
}

div.image div.image-wrapper
{
	height: 380px;
	width: 290px;

	position: absolute;
	top: 0px;
	left: 0px;
}

div.image div.name
{
	height: 30px;
	width: 290px;

	text-align: center;

	position: absolute;
	top: 400px;
	left: 0px;

	font-family: Arial;
	font-size: 15px;
	font-weight: normal;
	text-decoration: underline;
}

div.images div.spacer
{
	height: 450px;
	width: 90px;

	float: left;
	clear: none;
}

 

[petje11]

Bedankt voor je moeite, ik ga het doorgeven aan mijn moeder. Die heeft de website zelf gebouwd, dus misschien kan ze er wat mee.
Ik heb daar zelf te weinig verstand van.:thumb::thumb:

 

[lucky1]

Succes,

Mocht niet lukken laat het weten, mogelijk kan ik je ermee helpen.

 

[Dekjam]

Mijn moeder heeft een website waarvan de hele layout niet goed werkt

Sorry dat ik het even typ maar er zitten ook een paar foutjes in de menu's die ik eigenlijk niet heb gevonden. Dus ik ga wel naar een andere pagina maar hoe kom ik nu weer terug?