Problems with custom CSS

Ask the Community Customization
1

Navigation arrows not showing inside circles and video popup not scaling

Despite this:

  • The blue circles for the navigation buttons appear, but the white arrows (::after) don’t render.
  • Videos in the popup still sit in the top-left corner instead of filling/centering within the popup.

Could you advise how to properly target the navigation icons and how to get videos to scale correctly in the popup?

Thanks!

:root {
–nf-h: 500px;
}

/\* Media wrapper fixed height */
.eapps-social-feed-post-picture,
.eapps-social-feed-post-picture-inner,
.eapps-social-feed-post-picture-image,
\[class*=“MediaContainer”\],
\[class\*=“PostMedia”\] {
height: var(–nf-h) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}

/\* Contain images/videos */
.eapps-social-feed-post-picture img,
.eapps-social-feed-post-picture video,
\[class*=“MediaContainer”\] img,
\[class\*=“MediaContainer”\] video {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
margin: 0 auto !important;
}

/\* Popup videos \*/
.eapps-social-feed-post-popup video {
max-width: 100% !important;
max-height: 80vh !important;
object-fit: contain !important;
margin: 0 auto !important;
}

/\* Popup arrows \*/
.eapps-social-feed-post-popup .swiper-button-next,
.eapps-social-feed-post-popup .swiper-button-prev {
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
background: #256bc6 !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
top: 50% !important;
transform: translateY(-50%) !important;
background-image: none !important;
}

/\* White triangle arrow shapes \*/
.eapps-social-feed-post-popup .swiper-button-next::after {
content: “” !important;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid #fff;
}

.eapps-social-feed-post-popup .swiper-button-prev::after {
content: “” !important;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 12px solid #fff;
}
3

Hi there, @Novoferm :waving_hand:

The issue with the video alignment appeared because of these line in the code:

image
image1446×920 158 KB


And the arrow icons didn’t appear because you’ve used [class*="ArrowControl"] and I’ve replaced it with the more precise [class*="ArrowControl__ArrowControlContainer-sc"] here:

image
image1187×934 116 KB


Please check your widget and let me know if it’s fine now :slightly_smiling_face:

4

Hi Max, I see that this is indeed working. There’s just one more thing that isn’t functioning properly: the video elements in the popup window. I’d like them to span the full width of the left column. How can I adjust this?

Schermafbeelding 2025-09-29 154927
Schermafbeelding 2025-09-29 1549271587×829 144 KB

5

It’s possible, but the video will get cropped in this case. Would you like to proceed with this solution?

6

Hi Max, Maybe we should keep it only in full width? It’s no problem if the video doesn’t completely fill the column, but I think it will look better that way.

7

Okay, I’ll ask the devs to provide a solution for this and will let you know once I have any news :slightly_smiling_face:

8

Thank you for waiting!

Here is a final solution from our devs:

/* ===== FEED: 500px hoog, afbeelding volledig (contain) ===== */
:root {
  --nf-h: 500px;
}

.hjxXsz .swiper {
  max-width: 90%;
}

[class*="Popup__PopupContent-sc"] [class*="Columns-sc"]>div:not(:has(video)) {
  display: flex;
  flex-direction: column;
  flex: 1 1 29%;
}

/* kaart mag buitenranden tonen (voor pijlen) */
.eapps-social-feed-post,
[class*="Post"],
[class*="Card"],
[class*="GridItem"],
[class*="Feed__Item"] {
  overflow: visible !important;
}

/* media-wrapper op vaste hoogte + centreren met flex */
.eapps-social-feed-post-picture,
.eapps-social-feed-post-picture-inner,
.eapps-social-feed-post-picture-image,
[class*="MediaContainer"]:not(:has(video)),
[class*="PostMedia"] {
  padding-top: 0 !important;
  height: var(--nf-h) !important;
  min-height: var(--nf-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* <img>/<video>: nooit croppen, schaal binnen 500px */
.eapps-social-feed-post-picture img,
.eapps-social-feed-post-picture picture img,
.eapps-social-feed-post-picture video,
[class*="MediaContainer"] img,
/* [class*="MediaContainer"] video, */
[class*="PostMedia"] img,
[class*="PostMedia"] video {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

/* background-image varianten */
.eapps-social-feed-post-picture[style*="background"],
.eapps-social-feed-post-picture-inner[style*="background"],
.eapps-social-feed-post-picture-image[style*="background"],
[class*="MediaContainer"][style*="background"],
[class*="PostMedia"][style*="background"] {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  height: var(--nf-h) !important;
  min-height: var(--nf-h) !important;
}

/* inline fixes */
[style*="object-fit: cover"] {
  object-fit: contain !important;
}

[style*="background-size: cover"] {
  background-size: contain !important;
}

[style*="padding-top"] {
  padding-top: 0 !important;
}

/* swiper/slides volgen onze 500px */
.eapps-social-feed-post .swiper,
.eapps-social-feed-post .swiper-wrapper,
.eapps-social-feed-post .swiper-slide,
[class*="Carousel__CarouselSwiper"] {
  height: var(--nf-h) !important;
}

/* ===== FEED: Swiper-pijlen volledig uit ===== */
.eapps-social-feed-post [class*="swiper-button"] {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ===== ELFSIGHT BOLLEN: bol + pijltje als één geheel ===== */
/* verberg eventuele SVG's van Elfsight */
[class*="CarouselArrowControlContainer"] svg,
[class*="ArrowControl__ArrowControlContainer-sc"] svg {
  display: n !important;
}

/* bol basis */
[class*="CarouselArrowControlContainer"] button,
[class*="ArrowControl__ArrowControlContainer-sc"] button {
  position: relative !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #256bc6 !important;
  /* blauwe bol */
  cursor: pointer;
  overflow: visible !important;
}

/* DEBUG: rechts */
[class*="CarouselArrowControlContainer"][class*="Right"] button::after,
[class*="ArrowControl__ArrowControlContainer-sc"][class*="Right"] button::after {
  content: "R" !important;
  /* tijdelijk */
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px;
  height: 14px;
  background: red !important;
  color: white !important;
  font-size: 10px;
  text-align: center;
  line-height: 14px;
  z-index: 9999 !important;
}

/* DEBUG: links */
[class*="CarouselArrowControlContainer"][class*="Left"] button::after,
[class*="ArrowControl__ArrowControlContainer-sc"][class*="Left"] button::after {
  content: "L" !important;
  /* tijdelijk */
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px;
  height: 14px;
  background: red !important;
  color: white !important;
  font-size: 10px;
  text-align: center;
  line-height: 14px;
  z-index: 9999 !important;
}

/* positie van de bollen */
[class*="CarouselArrowControlContainer"][class*="Left"],
[class*="ArrowControl__ArrowControlContainer-sc"][class*="Left"] {
  left: -26px !important;
}

[class*="CarouselArrowControlContainer"][class*="Right"],
[class*="ArrowControl__ArrowControlContainer-sc"][class*="Right"] {
  right: -26px !important;
}

[class*="CarouselArrowControlContainer"],
[class*="ArrowControl__ArrowControlContainer-sc"] {
  top: 160px !important;
  transform: none !important;
  z-index: 10 !important;
}

/* mobiel: iets naar binnen */
@media (max-width: 640px) {

  [class*="CarouselArrowControlContainer"][class*="Left"],
  [class*="ArrowControl__ArrowControlContainer-sc"][class*="Left"] {
    left: 8px !important;
  }

  [class*="CarouselArrowControlContainer"][class*="Right"],
  [class*="ArrowControl__ArrowControlContainer-sc"][class*="Right"] {
    right: 8px !important;
  }
}

/* ===== POPUP: afbeeldingen contain + swiper pijlen gecentreerd ===== */
.eapps-social-feed-post-popup .eapps-social-feed-post-picture,
.eapps-social-feed-post-popup .eapps-social-feed-post-picture-inner,
.eapps-social-feed-post-popup .eapps-social-feed-post-picture-image {
  padding-top: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.eapps-social-feed-post-popup .eapps-social-feed-post-picture img,
.eapps-social-feed-post-popup .eapps-social-feed-post-picture picture img,
.eapps-social-feed-post-popup .eapps-social-feed-post-picture video,
.eapps-social-feed-post-popup .eapps-social-feed-post-picture-image img,
.eapps-social-feed-post-popup .eapps-social-feed-post-picture-image video {
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 80vh !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

.eapps-social-feed-post-popup .swiper-button-next,
.eapps-social-feed-post-popup .swiper-button-prev {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/***** 1) PROBE: laat zien of we de knoppen raken *****/
[class*="CarouselArrowControlContainer"] button,
[class*="ArrowControl__ArrowControlContainer-sc"] button {
  outline: 3px solid fuchsia !important;
  /* PROBE */
}

.eapps-social-feed-post .swiper-button-next,
.eapps-social-feed-post .swiper-button-prev {
  outline: 3px dashed lime !important;
  /* PROBE */
}

/***** 2) ZET SWIPER-PIJLEN WEER AAN (we override de hide-regel) *****/
.eapps-social-feed-post [class*="swiper-button"] {
  display: flex !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* ZEKER WETEN: verwijder eventuele iconen/achtergronden van Swiper */
.eapps-social-feed-post .swiper-button-next,
.eapps-social-feed-post .swiper-button-prev {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #256bc6 !important;
  /* blauwe bol */
  color: #fff !important;
  align-items: center !important;
  justify-content: center !important;
  display: flex !important;
  top: 160px !important;
  /* gelijk aan jouw custom positie */
  transform: none !important;
  z-index: 20 !important;
  background-image: none !important;
  /* haal eventuele default icons weg */
  box-shadow: none !important;
}

/* posities links/rechts */
.eapps-social-feed-post .swiper-button-prev {
  left: -26px !important;
}

.eapps-social-feed-post .swiper-button-next {
  right: -26px !important;
}

/* mobiel iets naar binnen */
@media (max-width: 640px) {
  .eapps-social-feed-post .swiper-button-prev {
    left: 8px !important;
  }

  .eapps-social-feed-post .swiper-button-next {
    right: 8px !important;
  }
}

/***** 3) BORDER-TRIANGLE PIJLEN OP DE SWIPER-KNOPPEN *****/
/* Rechts (›) */
.eapps-social-feed-post .swiper-button-next::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-40%, -50%) !important;
  /* iets naar rechts in de bol */
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fff;
}

/* Links (‹) */
.eapps-social-feed-post .swiper-button-prev::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-60%, -50%) !important;
  /* iets naar links in de bol */
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid #fff;
}

/* Hover (optioneel, netter gevoel) */
.eapps-social-feed-post .swiper-button-next:hover,
.eapps-social-feed-post .swiper-button-prev:hover {
  filter: brightness(1.08) !important;
}

/* ===== POPUP: media netjes 'contain' + gecentreerd ===== */
.eapps-social-feed-post-popup .eapps-social-feed-post-picture,
.eapps-social-feed-post-popup .eapps-social-feed-post-picture-inner,
.eapps-social-feed-post-popup .eapps-social-feed-post-picture-image,
.eapps-social-feed-post-popup [class*="MediaContainer"],
.eapps-social-feed-post-popup [class*="PostMedia"] {
  padding-top: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000;
  /* optioneel: zwarte balken */
}

/* <video> binnen popup: volledige video zichtbaar */
.eapps-social-feed-post-popup video {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 80vh !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 auto !important;
}

/* iframes (YouTube/Vimeo/LinkedIn) ook 'contain' */
.eapps-social-feed-post-popup iframe {
  display: block !important;
  border: 0 !important;
  margin: 0 auto !important;
  aspect-ratio: 16 / 9;
  width: min(100%, calc(80vh * (16 / 9))) !important;
  height: auto !important;
  max-height: 80vh !important;
}

/* inline styles van bronnen forceren naar contain */
.eapps-social-feed-post-popup [style*="object-fit: cover"] {
  object-fit: contain !important;
}

.eapps-social-feed-post-popup [style*="background-size: cover"] {
  background-size: contain !important;
}

.eapps-social-feed-post-popup [style*="padding-top"] {
  padding-top: 0 !important;
}

/* Swiper in popup: laat de slides zich centreren en niet forceren op vaste hoogte */
.eapps-social-feed-post-popup .swiper,
.eapps-social-feed-post-popup .swiper-wrapper,
.eapps-social-feed-post-popup .swiper-slide {
  height: auto !important;
  align-items: center !important;
  display: flex !important;
}

/* Pijlen in popup: midden op de media */
.eapps-social-feed-post-popup .swiper-button-next,
.eapps-social-feed-post-popup .swiper-button-prev {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: #256bc6 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: none !important;
}

/* pijlpuntjes */
.eapps-social-feed-post-popup .swiper-button-next::after,
.eapps-social-feed-post-popup .swiper-button-prev::after {
  content: "" !important;
}

.eapps-social-feed-post-popup .swiper-button-next::after {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fff;
}

.eapps-social-feed-post-popup .swiper-button-prev::after {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid #fff;
}

[class*="MediaVideo__Player-sc"] {
  height: 100% !important;
}

Please replace your current CSS code with the new one and let me know if you like the result :slightly_smiling_face:

9

Hi Max,

Thank you! It works perfectly, great job. I’m really happy with the result. :slight_smile:

10

Amazing, you’re always welcome!

By the way, we’d like to invite you to participate in our September Contest, where you can win a 6-month extension for your subscription - September Contest: Best AI Feature Ideas Win 6 Months FREE!:wrapped_gift:

Check the details and join in :wink: