Onjuiste mobiele weergave (iOS en tablet)

Bij een klant van mij is iets raars aan de mobile versie.

het gaat om de website
www.taalvoorjehond.nl/

Als ik deze op mijn Samsung s5 bekijk is alles prima in orde, maar ga ik dan naar mijn 10 inch Samsung tablet en hou hem in de portret stand dan is de helft van de header weg.

Als mijn klant het op haar I-pad of i-phone bekijkt is het in beide gevallen het zelfde probleem

Ik heb een Artisteer template gemaakt en joomla versie e is 3.3
iemand tips of iedereen ??

zij bijlage voor de error

Edit Juliank92: Ik heb je link aangepast omdat hij niet werkte (de tag werd verkeerd gebruikt). Ook heb ik de naam/onderwerp van je topic aangpast, omdat de oude naam (erorr in appel pc) niet over mobiele apparatuur ging.

Hi,

Het duurde even voordat ik snapte wat jij met 'de helft van de header' bedoelde, want hij bewoog keurig mee met het verkleinen en vergroten van het scherm. In de breedte althans Bij een bepaalde schermgrootte pakt jouw website de responsive stylesheet en worden deze regels van kracht:

Normaal is de hoogte van de header 300px, maar in de responsive css wordt deze auto(matisch, beweegt dus proportioneel mee met de breedte) en minimaal 100px. Dat laatste wil zeggen: 100px, tenzij de inhoud hem forceert om hoger te worden. De header heeft echter geen inhoud, dus hoger dan 100px wordt deze niet. De achtergrondafbeelding wordt bij het smaller maken van het scherm proportioneel mee verkleind (door 'background-size:cover;' elders in de code). De header heeft echter niet meer dezelfde verhouding als bij een groter scherm. Hierdoor pakt hij dan maar de volle breedte, omdat deze wel duidelijk gedefinieerd is (namelijk 100%) en vult de rest in de hoogte op.

Pakt je browserscherm maar eens bij een hoekpunt en verklein en vergroot je scherm, waarbij je de verhoudingen telkens wisselt. Het ene moment zul je de hele afbeelding zien, het andere moment niet.

Dit heeft dus niet met het merk van het apparaat (Apple) te maken, maar met de proportie van je afbeelding.

Oplossing? Lastig. Bij een scherm in portrait-stand (staand) heb je meer aan een vierkante afbeelding, zet je een decive in de ligstand, dan is een brede, niet al te hoge foto beter. Je zou dus hiervoor twee aparte afbeeldingen kunnen maken.

Tip: als je het niet zo'n probleem vindt dat de foto wordt minder zichtbaar is, maar je vindt het wel vervelend dat de naam van de site niet zichtbaar is, koppel deze dan los. Zorg dus dat die titel in gewone tekst ergens zichtbaar is (eventueel in een laag op de foto), en niet ingebakken in een foto (wat je eigenlijk nooit moet doen, maar dat terzijde).

Een lang antwoord. Ik hoop dat je er wat aan hebt. Mocht je iets niet begrijpen: laat het weten. Succes