menu dat zich vanzelf aanpast aan tablet?

  • Opgelost studioSK83

    (@studiosk83)


    10 jaren, 11 maanden geleden

    Goedemiddag,

    Op deze vrijdagmiddag de volgende vraag van een min of meer leek:
    Op mijn laptop wordt het menu van mijn site http://www.studiosk83.nl netjes weergegeven zoals ik het bedoeld heb, alle parent pagina’s naast elkaar en op de zelfde balk/hoogte. Wanneer ik mijn site bekijk met een iPad verschuift het laatste woord CONTACT naar de volgende regel.Heeft iemand een voorbeeld van de CSS die moet ik gebruiken zodat het menu zich aanpast aan de breedte van het display (dit heet liquid layout geloof ik)? En hoe dit toe te passen icm de afbeelding op mijn site?

    Alvast bedankt.
    groet
    Annemarie

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • LianneL

    (@liannel)

    10 jaren, 11 maanden geleden

    Je kunt dit op verschillende manieren oplossen. Je kunt met een mediaquerie opgeven dat de styling van het menu in het geval er met een smaller scherm wordt gekeken anders is (bv: lettertype iets kleiner, afstand van de menuitems iets kleiner).
    Maar misschien werkt bij jou al iets anders, namelijk dat je het laatste menu-item geen margin aan de rechterkant geeft (deze is nu 40px, dat is in jouw ontwerp lege ruimte op niets)

    .main-navigation li:last-child {
margin-right: 0px;
}

    Mediaqueries dus als bovenstaand niet helpt

    @media screen and (max-width: 1024px) {
.main-navigation li {
margin-right: 25px;
font-size: 13px;
}
}

    Let op de dubbele brackets, dit is omdat je een css-selector insluit. Die margin en size zijn smaller / kleiner dan nu: resp. 40px en 14px. Deze moet je vooral naar eigen bevinding aanpassen.

    Als je het echt liquid wilt maken, moet je met percentages gaan werken, (breedte van list-items, font-size), maar da’s een heel gereken.

    Succes!

    groet,
    Lianne

    Thread starter studioSK83

    (@studiosk83)

    10 jaren, 11 maanden geleden

    Hoi Lianne,

    Thanx! Ik heb inderdaad de margin right aangepast van de last-child en ook van de main navigation. Hierdoor past de tekst nu heel mooi op de iPad in de menubalk. Dan maar even hopen dat het voor de meeste apparaten goed te bekijken is zo.

    groet
    Annemarie

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘menu dat zich vanzelf aanpast aan tablet?’ is gesloten voor nieuwe reacties.