Op smartphone kan website wat naar links bewegen

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Goedemorgen,
Ik ben een website aan het maken maar op smartphone kan ik de site wat naar links bewegen.
Ik denk dat een element teveel naar rechts uitwijkt. Hoe kom ik erachter welke dat is? Met Firebug lukt het me niet om te zien.
Bekijk op deze link het probleem.

Thanks!
 
Probeer eerst een bacup te maken en kijk daarna door wat dingen aan te passen wat het probleem is. Ik ken niet direct een programma ervoor :)


edit: probeer eens element inspecteren in je rechterklik menu
 
Hoi @pcexpert. Dank je; al geprobeerd maar krijg t niet gevonden :-(
 
Hoi,

Het probleem zit 'm in de footer. Je geeft bij een footer-widget aan dat de breedte 100% moet zijn, maar deze ook een padding krijgt (links + rechts!). Zie:
Code: 
.footer-widget {
    width: 100%;
    padding: 1.5em 2em;
}

Browsers lezen dit als: maak een element met de class "footer-widget" zo breed als het scherm, en voeg daar dan 2em links en 2em rechts aan toe. Zo is de widget dus niet 100% breed maar uiteindelijk 100% + 4em en zorgt dit voor een horizontale 'overflow'.
Je kan dit voorkomen door box-sizing te gebruiken:
Code: 
.footer-widget {
    width: 100%;
    padding: 1.5em 2em;
    box-sizing: border-box;
}

Dit box-sizing CSS attribuut zorgt ervoor dat de padding en border van een element níet de breedte van het element aanpassen. Nu kan het element dus niet breder worden dan 100%.
 
Laatst bewerkt:
@CaptainBri dank je wel voor je reactie! Top het werkt. En nog beter, ik begrijp hoe het zit en waarom het eerst niet werkte.
Hoe heb je deze gevonden? Toch met element inspecteren of met Firebug? Om alle elementen daarmee af te lopen kost best wat tijd dus als je tip daarin hebt hou ik me aanbevolen.
 
Ik heb met de developer console (kan in elke browser) stap voor stap elementen uit de webpagina verwijderd (element selecteren + Delete knop) totdat de pagina goed sprong. Beginnen bij de high-level elementen, springt de pagina goed dan herlaad je en ga je steeds een stapje dieper in de boom-structuur. Zo wist ik in welk gebied de fout zat ;)
Mooi dat het werkt, goed om te horen!
 
Laatst bewerkt:
@CaptainBri ik zie dat ik nog niet op je bericht had gereageerd... foei. Hartstikke bedankt!! Ik ga dat de volgende keer ook zo doen met het verwijderen van die elementen. :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan