Ondersteuning » Thema en CSS/opmaak » marge tussen breadcrumps en erop volgende titel

  • Opgelost Willem 2

    (@willem-2)


    Ik gebruik het Twenty Twelve thema. Kan iemand mij helpen met de css code waarmee ik op een smartphone de afstand kan vergroten tussen de Yoast breadcrumps en de erop volgende titel?

    • Dit onderwerp is gewijzigd 6 maanden, 2 weken geleden door Willem 2.
    • Dit onderwerp is gewijzigd 6 maanden, 2 weken geleden door Willem 2.

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

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Nu staat er een vaste waarde op zie ik:

    #breadcrumbs {
    margin-bottom: 27px;
    }

    Dit kan je verhogen in het algemeen, of nog een @media regel toevoegen dat het enkel toegepast wordt op mobiele schermbreedtes – zie https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Thread starter Willem 2

    (@willem-2)

    Hallo Jeroen, bedanjkt voor je reactie! Met jouw advies en verder zoeken naar een code kwam ik tot de volgende oplossing:

    @media screen and (max-width: 760px) { breadcrumbs {float: absolute; font-size: 14px; line-height: 1.6; color: #8e908f; margin-bottom: 45px;}}

    Dit lost het mobiele probleem op. Echter, op mijn tablet en laptop werkt het niet. Ik heb in allerlei variaties het volgende geprobeerd:

    #breadcrumbs {float: absolute; font-size: 14px; line-height: 1.6; color: #8e908f; margin-bottom: 27px;}

    Ik weet van css niet meer dan dat ik pixels en dergelijke kan aanpassen. Weet jij een oplossing?

    Guido

    (@guido07111975)

    Hoi Willem,

    Deze 2 gebruik ik regelmatig. 768px is de standaard iPad in portret modus.

    /* Scherm tot en met 767px */ 
    @media screen and (max-width:767px) {
    	#breadcrumbs {margin-bottom:45px;}
    }
    
    /* Scherm vanaf 768px */ 
    @media screen and (min-width:768px) {
    	#breadcrumbs {margin-bottom:25px;}
    }

    Maar er zijn veel verschillende schermgroottes. Dus ik gebruik alleen media queries als het écht nodig is.

    Guido

    Moderator Jeroen Rotty

    (@jeroenrotty)

    Support Moderator

    Goeie tip van Guido. Daarnaast kan je ook werken met “niet-vaste” waardes in aantal pixels, maar ook in vh (viewport height), rem, %, … Zie meer uitleg: https://www.sitepoint.com/css-viewport-units-quick-start/

    Thread starter Willem 2

    (@willem-2)

    Bedankt Guido en Jeroen,

    Ik lijk hiermee de oplossing te hebben. Ik kan echter op dit moment verder niet veel uittesten omdat ik bijna aan de maximale capaciteit zit voor pagina optimalisatie bij quic cloud.

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘marge tussen breadcrumps en erop volgende titel’ is gesloten voor nieuwe reacties.