Goedemorgen,

Het lijkt als of de div die de content bevat niet responsive is, en de header wel. Hierdoor is het inderdaad mogelijk dat het menu zich wel aanpast mobiel en de content van de pagina niet. Nu moet ik eerlijk bekennen dat ik oppervlakkig heb gekeken maar ik zal vanmiddag er wat beter naar kijken.

Maakt u gebruik van bootstrap of een bestaand CMS?

(edit)
Ik merk dat als ik mijn browser kleiner maak het goed gaat tot een bepaald breakpoint (vermoed ipad formaat) indien ik het smaller maak krijg ik het zelfde probleem als mobiel.

Hallo,

Als je met bootstrap werkt dan is het zeer gemakkelijk om je website responsive te hebben.

Als je werkt zonder bootstrap dan moet je rekening mee houden dat je met "Media Queries" werkt. Deze zorgen er voor dat je jouw website responsive kan maken.

Hopelijk ben je hiermee al wat geholpen.

Als je naar de broncode kijkt is het vrij duidelijk dat ze wel bootstrap gebruikt. Zie bijvoorbeeld de class="row" of class="col-md-10".. etc.

@kimmert

Er klopt iets niet helemaal met de opbouw van je site. Een row heeft altijd 12 kolommen, maar ik zie je er niet altijd 12 toewijzen. Als je class="col-md-10" gebruikt en je wilt die in het midden hebben moet er nog een class="col-md-1" voor. Die erna hoeft niet per se mits je de row netjes afsluit.

Daarnaast om een pagina over de volledige breedte te hebben heeft Bootstrap de class "Container-fluid" bedacht.

De grote regel bij het ontwerpen van een goede responsive website is "Mobile first development". Je gaat er in eerste instantie uit dat je een website voor mobiel maakt en gaat die dan door middel van media queries aanpassen zodat de website ook op een tablet of groter beeldscherm mooi is. Ik gebruik zelf Google Chrome en die heeft native daar al een handige functie voor. Als je naar de developers console gaat in Google Chrome op de pagina die je wilt bekijken, zie je linksbovenin 2 rechthoeken in elkaar. Als je daar op klikt verandert Chrome in een andere modus en kan je aangeven als wat voor apparaat je de website wilt bekijken. Bijvoorbeeld een iPad, Nexus of je kunt ook je eigen custom afmetingen maken.

Het is voor nu denk ik zaak dat je terugkijkt naar je website en bedenkt wat je wel op je mobiel wilt laten zien en wat niet en dat dan door middel van de bootstrap media queries opbouwen. Vergeet niet dat je binnen een row altijd 12 kolommen hebt.

Succes en mocht je vragen hebben hoor ik die graag!

Ik zie dat je zelf css hebt gemaakt zoals

header .intro-text {
    padding-top: 250px;
    padding-bottom: 200px;
    text-align: center;
}

je geeft hier aan op je tekst 250 px te alignen vanboven en 200px van beneden. Dit is enorm veel op een (kleine) smartphone.

Vervolgens helpt Victor zijn comment wel =).