# Problems with custom CSS

**URL:** <https://community.elfsight.com/t/problems-with-custom-css/140084>\
**Category:** Customization\
**Tags:** linkedin-feed\
**Created:** [September 29, 2025, 10:43am UTC](https://community.elfsight.com/t/problems-with-custom-css/140084 "2025-09-29T10:43:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Novoferm](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/novoferm/32/79143_2.png) [@Novoferm](https://community.elfsight.com/u/Novoferm)\
**Post date:** [September 29, 2025, 10:43am UTC](https://community.elfsight.com/t/problems-with-custom-css/140084/1 "2025-09-29T10:43:50Z")

</div>

Navigation arrows not showing inside circles and video popup not scaling

> **[blog | werken bij Novoferm](https://test.novoferm-documentatie.nl/blog/)**

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!

```auto
: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;
}

```

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 29, 2025, 1:32pm UTC](https://community.elfsight.com/t/problems-with-custom-css/140084/3 "2025-09-29T13:32:25Z")

</div>

Hi there, @Novoferm 👋

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/4/54bd661f3eed6e7a706ce410b6ff253272012b2c.jpeg)

  

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](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/b/ab3474df7d4476509022f9ef279bb3b54ade71be.jpeg)

  

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

---

<div class="post-metadata">

**Author:** ![Novoferm](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/novoferm/32/79143_2.png) [@Novoferm](https://community.elfsight.com/u/Novoferm)\
**Post date:** [September 29, 2025, 1:50pm UTC](https://community.elfsight.com/t/problems-with-custom-css/140084/4 "2025-09-29T13:50:34Z")

</div>

> [@Max](#):
>
> ArrowControl\_\_ArrowControlContainer-sc

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](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/5/15f0428703b125479ddde5ffc76c3591a779ee3f.jpeg)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 29, 2025, 1:56pm UTC](https://community.elfsight.com/t/problems-with-custom-css/140084/5 "2025-09-29T13:56:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Novoferm](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/novoferm/32/79143_2.png) [@Novoferm](https://community.elfsight.com/u/Novoferm)\
**Post date:** [September 29, 2025, 2:08pm UTC](https://community.elfsight.com/t/problems-with-custom-css/140084/6 "2025-09-29T14:08:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [September 29, 2025, 2:15pm UTC](https://community.elfsight.com/t/problems-with-custom-css/140084/7 "2025-09-29T14:15:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 1, 2025, 12:18pm UTC](https://community.elfsight.com/t/problems-with-custom-css/140084/8 "2025-10-01T12:18:03Z")

</div>

Thank you for waiting!

Here is a final solution from our devs:

```auto
/* ===== 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 🙂

---

<div class="post-metadata">

**Author:** ![Novoferm](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/novoferm/32/79143_2.png) [@Novoferm](https://community.elfsight.com/u/Novoferm)\
**Post date:** [October 1, 2025, 1:35pm UTC](https://community.elfsight.com/t/problems-with-custom-css/140084/9 "2025-10-01T13:35:33Z")

</div>

Hi Max,

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 1, 2025, 1:38pm UTC](https://community.elfsight.com/t/problems-with-custom-css/140084/10 "2025-10-01T13:38:59Z")

</div>

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!🎁](https://community.elfsight.com/t/september-contest-best-ai-feature-ideas-win-6-months-free/139325)

Check the details and join in 😉