Ondersteuning » Thema en CSS/opmaak » Border van kleine afbeelding verschijnt in volle breedte

Border van kleine afbeelding verschijnt in volle breedte

  • arno

    (@edmosveer)


    2 jaren, 12 maanden geleden

    Goedemiddag,

    Op de berichtenpagina hebben de foto’s een grijze bovenrand van een paar pixels. Dat gaat prima behalve bij kleinere foto’s, daarbij loopt de border van de afbeelding door naar rechts in de volle breedte. Ik heb in de bron gekeken maar weet niet hoe ik dat kan veranderen:

    .wp-block-image, size-large {
border-top:4px solid #ccccd6}

<figure class="wp-block-image size-large">

<img loading="lazy" width="640" height="425" src="##" alt="" class="wp-image-12446" srcset="## 640w, https://www.bamboenieuws.nl/wp-content/uploads/2021/04/##.jpeg 300w" sizes="(max-width: 640px) 100vw, 640px" />

</figure>

    Ik heb geen live voorbeeld maar het gaat om de berichtenpagina’s zoals deze:

    https://www.bamboenieuws.nl/drie-doden-bij-aanslag-in-pattani-zuid-thailand/

    Daar staat een rand boven de afbeelding – is de afbeelding kleiner, dan blijf de rand even breed als bij deze foto.

    Heeft iemand een tip?
    Bij voorbaat dank,
    Gr. Arno

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Guido

    (@guido07111975)

    2 jaren, 12 maanden geleden

    Hoi Arno,

    Dat doorlopen van de rand komt doordat deze rand niet aan de afbeelding zelf gekoppeld is maar aan de “wrapper” die erom heen zit, de figure

    Wat wil je, alleen een bovenrand of een rand om hele afbeelding heen?

    Guido

    Thread starter arno

    (@edmosveer)

    2 jaren, 12 maanden geleden

    Hallo Guido,

    Alleen een bovenrand, ipv een standaard HR omdat ddie er niet overal hetzelfde uitziet.

    Bedankt, Gr. Arno

    Guido

    (@guido07111975)

    2 jaren, 11 maanden geleden

    Hoi Arno,

    Dan moet je hem van de figure verwijderen:

    
.wp-block-image, size-large {border-top:0 !important;}

    En dan toevoegen aan de afbeelding zelf:

    
.wp-block-image img, size-large img {border-top:4px solid #ccccd6 !important;}

    Mogelijk werkt het ook zonder !important declaratie er achter.

    Guido

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Het onderwerp ‘Border van kleine afbeelding verschijnt in volle breedte’ is gesloten voor nieuwe reacties.

Weergaven