Ondersteuning » Algemeen WordPress » Onderschrift Slideshow lijnt niet goed uit

  • robromeijn

    (@robromeijn)


    Goedemiddag,

    Zojuist heb ik een slideshow toegevoegd aan mijn blog-bericht, waarbij ik elke dia een onderschrift heb gegeven.In het dashboard ziet dat er keurig uit, met een kleine overlay aan de onderzijde van de dia. Echter, na publiceren komt het bijschrift ineens linksboven te staan, en wordt 80 procent van de hele dia bedekt door de overlay. Het thema dat ik gebruik is Brite.
    Hoe los ik dit op?

    Groetjes, Rob

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

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

    (@guido07111975)

    Hallo Rob,

    De pagina staat achter een inlog.

    Gebruik je een plugin voor de slideshow? Zo ja, welke?

    Guido

    Thread starter robromeijn

    (@robromeijn)

    Hi Guido,

    Dank voor je berichtje,
    O ja,is alleen voor leden, 😉 Nee ik gebruik geen plug-in ervoor, gewoon de standaard slideshow die in de blok-editor van wp zit.

    Ik heb de slideshow even gekopieerd naar een openbaar bericht voor je: https://nieuwhw.nl/test-pagina-slideshow/

    Guido

    (@guido07111975)

    Hoi Rob,

    Volgens mij is dit de slideshow van de Jetpack plugin? Tenminste, dat maak ik op uit de CSS. Ik weet niet of je de caption via de instellingen van Jetpack kunt wijzigen, ik gebruik die plugin niet.

    Je kunt de caption verwijderen door dit toe te voegen op pagina Extra CSS van de Customizer in je dashboard:

    .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption {display:none;}

    Als je de caption wilt behouden, laat het me weten.

    Guido

    Thread starter robromeijn

    (@robromeijn)

    Hi Guido,

    Klopt, Jetpack heb ik inderdaad. De caption wilde ik eigenlijk wel behouden, als het op de juiste wijze word afgebeeld. In het dashboard zie ik de caption gewoon netjes onderin binnen een overlay van een centimeter. En dat is wel mooi.

    groetjes, Rob

    Guido

    (@guido07111975)

    Hoi,

    Omdat ik Jetpack niet gebruik, kan ik niet meekijken in de editor. Kun je de slideshow in je editor via je browser inspecteren en de CSS van het element figcaption hier delen? Dit doe je door op de slideshow te gaan staan met je cursor en dan rechtermuisklik > “Inspecteren”. Dan het element opzoeken en de bijbehorende CSS dus kopiëren en hier plakken.

    Guido

    Thread starter robromeijn

    (@robromeijn)

    Ik denk dat je dit bedoelt?

    li.wp-block-jetpack-slideshow_slide:nth-child(16) > figure:nth-child(1) > figcaption:nth-child(2)

    of dit wellicht?
    html body#colibri.post-template-default.single.single-post.postid-10445.single-format-standard.logged-in.admin-bar.wp-custom-logo.theme-brite.woocommerce-js.give-test-mode.give-page.customize-support div#page-top.site div#content.content.position-relative.colibri-main-content-single div.d-flex.h-section.h-section-global-spacing.position-relative.main-section div.h-section-grid-container.h-section-boxed-container.main-section-inner div.h-row-container.gutters-row-lg-2.main-row div.h-row.gutters-col-lg-2.main-row-inner div.h-col div.style-1787.style-local-7838-m1.h-overflow-hidden.position-relative div#blog-post.h-section.h-section-global-spacing.d-flex.align-items-lg-center.align-items-md-center.align-items-center.style-1788.style-local-7838-m2.position-relative div.h-section-grid-container.h-section-boxed-container div.h-row-container.gutters-row-lg-0.gutters-row-md-0.gutters-row-0.gutters-row-v-lg-0.gutters-row-v-md-0.gutters-row-v-0.colibri-dynamic-list.colibri-single-post-loop.style-1793.style-local-7838-m3.position-relative div.h-row.justify-content-lg-center.justify-content-md-center.justify-content-center.align-items-lg-stretch.align-items-md-stretch.align-items-stretch.gutters-col-lg-0.gutters-col-md-0.gutters-col-0.gutters-col-v-lg-0.gutters-col-v-md-0.gutters-col-v-0 div.h-column.h-column-container.d-flex.h-col-lg-12.h-col-md-12.h-col-12.post-10445.post.type-post.status-publish.format-standard.hentry.category-activiteit.category-leden.masonry-item.style-1794-outer.style-local-7838-m4-outer div.d-flex.h-flex-basis.h-column__inner.h-px-lg-0.h-px-md-0.h-px-0.v-inner-lg-0.v-inner-md-0.v-inner-0.style-1794.style-local-7838-m4.position-relative div.w-100.h-y-container.h-column__content.h-column__v-align.flex-basis-100.align-self-lg-start.align-self-md-start.align-self-start div.h-row-container.gutters-row-lg-0.gutters-row-md-0.gutters-row-0.gutters-row-v-lg-0.gutters-row-v-md-0.gutters-row-v-0.style-1796.style-local-7838-m5.position-relative div.h-row.justify-content-lg-center.justify-content-md-center.justify-content-center.align-items-lg-stretch.align-items-md-stretch.align-items-stretch.gutters-col-lg-0.gutters-col-md-0.gutters-col-0.gutters-col-v-lg-0.gutters-col-v-md-0.gutters-col-v-0 div.h-column.h-column-container.d-flex.h-col-lg-auto.h-col-md-auto.h-col-auto.style-1797-outer.style-local-7838-m6-outer div.d-flex.h-flex-basis.h-column__inner.h-px-lg-3.h-px-md-3.h-px-3.v-inner-lg-3.v-inner-md-3.v-inner-3.style-1797.style-local-7838-m6.position-relative div.w-100.h-y-container.h-column__content.h-column__v-align.flex-basis-100.align-self-lg-center.align-self-md-center.align-self-center div.style-1803.style-local-7838-m12.position-relative.h-element div.colibri-post-content.h-global-transition-all div.wp-block-jetpack-slideshow div.wp-block-jetpack-slideshow_container.swiper-container.swiper-container-fade.swiper-container-initialized.swiper-container-horizontal.swiper-container-pointer-events.wp-swiper-initialized ul#swiper-wrapper-8557cd6855478c1a.wp-block-jetpack-slideshow_swiper-wrapper.swiper-wrapper li.wp-block-jetpack-slideshow_slide.swiper-slide.swiper-slide-duplicate.swiper-slide-next figure figcaption.wp-block-jetpack-slideshow_caption.gallery-caption

    Guido

    (@guido07111975)

    Dit zijn de CSS-klassen, ik had de daadwerkelijke CSS (opmaak) nodig.

    Maar in de tussentijd zie ik al waar het fout gaat, de CSS van de Colibri pagina bouwer veroorzaakt dit.

    Voeg deze fix eens toe op pagina Extra CSS vd Customizer:

    .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption {top:auto;}

    Guido

    Thread starter robromeijn

    (@robromeijn)

    Hi Guido,

    Dat werkt al een stuk beter inderdaad. Thanx! De overlay is nu weer terug naar beneden. Alleen steekt de overlay nu uit, aan weerszijden van de foto. Is dat nog aan te passen?

    Guido

    (@guido07111975)

    Hoi Rob,

    Probeer dit eens:

    .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image {width:100%;}

    Guido

    Thread starter robromeijn

    (@robromeijn)

    Hallo Guido,

    Je laatste advies werkt helaas niet. De overlay blijft uitsteken

    Guido

    (@guido07111975)

    Dan de prioriteit verhogen middels de !important statement:

    .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image {width:100% !important;}

    Guido

    Thread starter robromeijn

    (@robromeijn)

    Nee, helaas nog hetzelfde. Heb je nog een suggestie? Anders laten we het wel zo hoor. Dit is in ieder geval beter dan wat het was.

    Guido

    (@guido07111975)

    Hier wel hoor, dus misschien moet je de cache van je browser even legen. Of in een andere browser proberen.

    Guido

    Thread starter robromeijn

    (@robromeijn)

    Hi Guido,

    Ik heb je laatste advies inmiddels geprobeerd. Zowel Firefox als Chrome hebben de overlay buiten de foto. Ook na cache wissen en opnieuw opstarten van de laptop.
    In de mobiele browser van Firefox werkt het overigens wel goed.

    Groetjes, Rob

    Guido

    (@guido07111975)

    Hoi Rob,

    Ik heb ook in meerdere browsers geprobeerd. Hij steekt alleen in bepaalde schermgroottes uit, dat heeft te maken met het formaat/verhouding van de afbeelding. Overigens staan bij mij de pauze en de volgende/vorige knop dan ook naast de afbeelding.

    Je kunt de afbeelding forceren de hele breedte/hoogte te nemen, door dit toe te voegen aan mijn vorige CSS:

    object-fit:cover !important;

    Guido

15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)
  • Het onderwerp ‘Onderschrift Slideshow lijnt niet goed uit’ is gesloten voor nieuwe reacties.