Support » CSS / opmaak vragen » [NSFW] Header responsive maken

  • Hallo wordpress people,

    Ik kom ergens niet uit. (op zich meerdere dingen niet maar het gaat nu even om de header)

    Ik heb een webshop gemaakt. De header(menubalk) is niet goed responsive op een tablet. Graag wil ik dat de categorieën in 1 regel blijven staan maar op de tablet/ipad komen de laatste 2 regels en als je de tablet horizontaal draait laatste categorie een regel eronder te staan.

    Ik heb al gekeken naar de juist css echter kan ik deze niet vinden. Ook met mijn WP Bakery plugin kan ik dit niet veranderen.

    Kan iemand mij helpen?

    Groeten
    John

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Is op zich prima responsive echter omdat er teveel items in staan met te lange namen komt het ook op een 2e regel

    Nu zou je met CSS code de tekst kleiner kunnen maken, nadeel daarvan is dat met de vingers ergens op klikken een stuk minder precies is dan met een muis.
    Je benadeeld de bezoeker dan 2 maal, door het lastiger leesbaar te maken én moeilijker om aan te klikken.

    Eenvoudigste is om de namen en structuur te heroverwegen.
    kleding er uit en die onder heren/dames voegen en je hebt alweer voldoende ruimte.

    Verder zou je met een @media query
    header.site-header div.nav>ul>li>a, header.site-header ul.nav>li>a{font-size:12px;}
    de tekst kunnen verkleinen.

    Hallo richard,

    bedankt voor je snelle reactie!

    Ik ga kijken of ik mijn categorieen kleiner kan maken. Tekst kleiner maken is ook een idee maar net wat je schrijft, het wordt allemaal lastiger voor de klant dan.

    Nu heb ik nog een vraag, wellicht kan je deze ook beantwoorden. Ik krijg de css nog niet voor elkaar mbt de winkelwagen ( https://www.sexyverleidingen.nl/winkelmand/ ) even een product toevoegen en je ziet mijn probleem.

    product, prijs, aantal en subtotaal staan te dicht op elkaar waardoor het rommelig oogt. Ook voor de product beschrijving hoort een afbeelding van het product te staan. Deze is er nu wel maar echt heeeeeel klein. Ik heb verschillende css codes geprobeerd maar deze krijg ik niet voor elkaar.

    Hopelijk kan jij/iemand mij hier nog mee helpen.

    Groeten
    John

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