Als site zwabbert op mobiel hoe troubleshooten

Status
Niet open voor verdere reacties.

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.384
Hoi,
Ik maak nog wel eens mee dat een site op mobiel zwabbert dus dat ergens op de pagina een element te breed is. Er is dan bij Firefox in de Responsive Design modus een horizontale scroll balk.
Soms zoek ik me een ongeluk om te achterhalen waar de fout zit.
Is daar een handig trucje voor? Ben al aan het kijken met Outline tool van de Web developer toolbar maar kom er nog niet verder mee.

Thanks!
 
Ik snap niet wat je precies bedoelt?
 
@php4u, bedankt voor reageren.

Ik leg me niet zo helder uit. Als je een site mobiel bekijkt en omlaag scrollt, dan kan het wel eens voorkomen dat je ook naar links/rechts kan scrollen.
Ik ben nu bezig met een site en zodra als ik in Responsive design modus ben (Firefox) het beeld smaller dan 475 pixels is er een horizontale scrollbalk komt.
Volgens mij is er dan een element wat breder is dan de rest van de inhoud van de site.
Hoe zoek ik dat element op.
 
Mijn ervaring is ook dat dit achteraf lastig is. Dit doe ik altijd tijdens de bouw:
- box-sizing: border-box gebruiken zodat border en padding binnen de elementen vallen
- in de breedte padding i.p.v. margin (als ik margin gebruik, dan elke width en margin optellen)
- in de breedte procenten (hetzelfde verhaal, als ik px gebruik, dan elke width en margin optellen)
- tussendoor in de gaten houden of de breedte niet groter is dan 100%
- px en procenten niet mixen (!) tenzij je de px ergens compenseert met dezelfde, maar dan negatieve waarde
- een paar hulp classes, vooral handig voor block-level elementen
Code:
body > .wrap {width: 320px; margin-right: auto; margin-left: auto;}
.back {background: #ff0 !important;}
.bord {border: 1px dotted #f00 !important;}
Met een extra <div class="wrap"> om de pagina kan je de breedte tijdelijk hard op 320px zetten
Daarna kan je op verdachte elementen in je structuur de class back (background) of bord (border) zetten om de "outline" te vinden.
In de praktijk gebruik ik meestal class back (iets handiger dan class bord)

Dit kan ook handig zijn
Maak een bgtest.jpg van 800x12 px met daarop aan de linkerzijde een geel vlak van 320x12 px.
Code:
body {background: #fff url('bgtest.jpg') repeat-y 0 0;}

aanvulling: in de afbeelding vind je "bgtest.jpg" met gekleurde vlakken op 320, 480 en 768 pixels.

Suc6. Have fun.
 

Bijlagen

  • bgtest.jpg
    bgtest.jpg
    1,4 KB · Weergaven: 47
Laatst bewerkt:
Dank je wel voor al je tips @bron! Ik kan er zeker mee aan de slag, had wel gehoopt dat ik met firebug of chrome inspector er op een gemakkelijkere manier nu erachter kwam.
Maar... ik neem de tips ter harte.
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan