Website beeldvullend maken mobile devices

  • Hallo allemaal,


    Ik ben bezig met de website voor het restaurant waar ik leidinggevende ben.
    Nu is hij op de computer helemaal goed te zien, alleen als ik op mijn iPhone kijk
    dan is wel het menu over de gehele breedte van het scherm alleen de rest van de website niet!
    De website is http://www.diedrieharinghe.nl misschien kunnen jullie zien waar het in de code mis gaat?
    Alvast ontzettend bedankt!


    Groeten Kim :)

  • 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.

  • 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



    CSS
    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 =).

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!