Website beeldvullend maken mobile devices

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • 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 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!
      Met vriendelijke groet,

      Victor
      Beheerder ICTscripters