Support » CSS / opmaak vragen » Blogpagina afbeeldingen alignment gaat niet goed

  • Opgelost jillfortezza

    (@jillfortezza)


    Hallo iedereen,

    Ik weet niet meer wat ik moet doen 🙁
    Op mijn website heb ik een blogsectie die via de berichten loopt. Sinds een week alignen alleen mijn afbeeldingen niet meer goed uit, zoals bijvoorbeeld in deze blog: https://www.werkenbijfortezza.nl/hacken-op-de-hei-met-fortezza-softwareprofs/.

    In de editor heb ik wel de alignment gezet op “centreren”.
    Als ik in de htmlcode (zie onder) kijk, zie ik ook gewoon aligncenter staan.

    Maar als ik de blog dus publiceer staat het ten opzichte van de tekst toch rechts uitgecentreerd.

    Iemand een idee waaraan dit ligt of waar ik verder moet kijken?

    <figure class=”wp-block-gallery aligncenter columns-2″><ul class=”blocks-gallery-grid”><li class=”blocks-gallery-item”><figure></figure><li class=”blocks-gallery-item”><figure></figure></figure>

    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

    Doet het probleem ook voor wanneer je Autoptimize hebt uitgeschakeld (die voegt alle CSS/JS samen en kan problemen veroorzaken)

    pro-tip; je kunt Autoptimize op een per-request basis uitzetten door ?ao_noptimize=1 aan de URL toe te voegen.

    Als het probleem zich dan niet stelt, moet AO ge(her)configureerd worden, maar info info in de AO FAQ.

    Thanks voor jullie snelle reacties!
    Het probleem doet zich helaas nog steeds voor ook als autooptimize uitgeschakeld is.. 🙁

    Er zit een margin op een list element in je html. Hierop zit een marge die links de foto’s opzij drukt. Door onderstaande css toe te voegen aan je customizer (Weergave > Customizer > Extra CSS) zal dit aangepast worden:

    .wp-block-gallery .blocks-gallery-grid {
        margin: 15px 20px;
    }

    Door de waardes “15px” en “20px” aan te passen kun je hiermee schipperen. Zet ze op 0 om de afbeeldingen van zij tot zij te laten lopen zonder afstand. Dan zou je dus zoiets krijgen:

    .wp-block-gallery .blocks-gallery-grid {
        margin: 0;
    }

    Held! Dankje, dat is gelukt. Nu ziet er weer goed uit 🙂

    Thanks iedereen!

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