Support Volgende » Algemene WordPress vragen Volgende » kop afbeelding op mobiel weg

  • Opgelost wedebe112

    (@wedebe112)



    1) Ik bemerk dat mijn kop-afbeelding op een SMART telefoon niet wordt getoond.
    Andere sites die ik ook met Thema 2013 heb gebouwd hebben dat niet.

    2) Is er een makkelijke manier om Thema 2013 responsive te maken. of te wel dat de tot op heden gebruikte opzet met een andere thema makkelijk is om te zetten om ook op mobiel aantrekkelijk te maken ??

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

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Hallo,

    1) Heb even in de broncode van jouw site en het thema gekeken.

    In mobiel scherm zorgt de titel en tagline voor hoogte.. en die heb jij niet ingesteld.

    Ik zie dit in je stylesheet staan, voor mobiel scherm:

    
    .site-header .home-link {
        min-height: 0;
    

    Voor normaal scherm staat hij op min-height: 230px;

    Dus in mobiel scherm wordt de hoogte alleen groter als er een titel en tagline ingesteld is.

    Om hem hoger te maken in mobiel scherm (zonder titel en tagline) zou je dit kunnen toevoegen in de aangepaste CSS pagina in de Customizer:

    
    @media (max-width: 767px) {
    	.site-header .home-link {
    		min-height: 150px;
    	}
    }
    

    Dan wordt het element dus 150px hoog in mobiel scherm.

    2 ) Dit thema is zeker responsive maar doordat de pagina-content is opgebouwd uit verschillende elementen (kolommen/breedtes), wordt de weergave in mobiel er niet mooier op.

    Guido

    Guido,

    Top dat werkt, alleen heb ik min-height: 150px; naar min-height: 120px; gezet.
    Maar hoe krijg ik nu dat ook de breedte van de kopafbeelding mee gaat met de rest van de tekst.

    Probleem is dat die afbeelding als achtergrond van element .site-header is ingesteld. Dus de hoogte van de elementen die daarin staan bepaalt hoeveel je van die afbeelding te zien krijgt. Dit is dus op te lossen door een minimale hoogte in te stellen, maar werkt niet optimaal, door de vele verschillende scherm groottes die er zijn.

    Wat je kunt doen is de achtergrond altijd 100% breed laten zijn en de hoogte automatisch (in zowel normaal als mobiel scherm):

    
    .site-header {background-size:100% auto !important;}
    @media (max-width: 767px) {
    	.site-header {background-size:100% auto !important;}
    }
    

    Verwacht dat je dan de hoogte min-height ook iets moet wijzigen, voor mobiel scherm.

    Guido

    Guido,
    Wederom dank, doch als ik de code van:
    @media (max-width: 767px) {
    .site-header .home-link {
    min-height: 150px;
    }
    }
    naar:
    .site-header {background-size:100% auto !important;}
    @media (max-width: 767px) {
    .site-header {background-size:100% auto !important;}
    }

    Blijft mijn menu-balk geheel bovenaan staan en komt mijn “kop afbeelding” een stukje onder de menubalk uit.

    Hoi,

    Maar je moet de min-height: 120px; niet vergeten, want anders gebruikt hij de min-height: 0; die in het stylesheet van het thema staat.

    Zoals ik eerder doorgaf zorgt de site-titel en de tagline normaal gesproken voor de hoogte maar aangezien je die niet ingesteld hebt is de hoogte nul. Vandaar de min-height.

    Als hij dan nog steeds onder de menubalk uitsteekt, zou je background-position kunnen toevoegen. Daarmee stel je de locatie van de achtergrond afbeelding in.

    Dan wordt het dus in totaal voor mobiel scherm:

    
    @media (max-width: 767px) {
    	.site-header {background-size:100% auto !important; background-position:center top;}
    	.site-header .home-link {min-height:120px;}
    }
    

    Guido

    ps. als je code plaatst druk dan vóór en ná de code op de “code” button.

    Guido,

    Wederom dank, steeds een heel duidelijk antwoord.

    Alleen zie ik nergens een “code” button staan.

    Wim..

    Graag gedaan!

    Als het goed is zie je een tekst opmaakbalk staan boven het scherm waar je je antwoord typt. Daar staat ondermeer een code button tussen.

    Guido

    Guido,

    Een hoop probleempjes opgelost, alleen vind ik het dakje nog niet echt mooi. (zit bij mobiel veel ruimte tussen dakje en menubalk)
    De code-button zie ik echt niet staan. (ik kijk bij weergave/Customizer/extra CSS en zie alleen “Gepubliceerd” staan).
    Weet jij welk Thema dat aankan en makkelijk is over te zetten, zelfde gewenst opzet. (Kop/menubalk/2 kolommen, 1 tekst en 1 button-menu) ??

    Wim..
    *

    Zoals jij wilt, met afbeelding van dak bovenaan over volledige breedte inclusief de menu balk, kan lastig worden. Dan wordt het misschien maatwerk (en dat is vaak niet gratis). Dan zou je moeten overwegen om de site geheel te veranderen qua opzet.

    Wat de ruimte tussen dak en menu in mobiel scherm betreft, je kunt toch de min-height minder maken, van 100 naar 75 bijvoorbeeld?

    Met de code button bedoel ik hier, in het forum. Als je code (CSS, PHP, HTML) plaatst dan kun je het best op de “code” knop drukken, vóór en ná de code. Dan komt de code in een mooi kader te staan en is het herkenbaar als code.

    Guido

    Guido,

    Weer super dank en sorry nu snap ik je pas (Ik zat meer te denken aan F5 (refresh)).
    Buytheway, ik ben vrijwilliger die vrijwilligers organisaties help met hun website, in dit geval met het ombouwen van Joomla naar WP, dus niet wat ik wil maar wat zij vragen.
    Dit is ook de reden dat ik vraag om e.e.a. snel om te bouwen naar een ander thema die dat allemaal wel aan kan.
    Jij in ieder geval heel erg dank voor je professioneel meedenken, heb er weer wat van geleerd.

    Wim..
    *

    Guido,

    Bedankt.

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Het onderwerp ‘kop afbeelding op mobiel weg’ is gesloten voor nieuwe reacties.