How to align height of linkedin posts

[Kamil_Kucharski]

• Issue description:
  I would like to align height of my posts on linkedin feed carousel, almost each post is with different height, how is it possible to make them the same height and set it by CSS or JavaScript?

What I got so far is:

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

[class*="CarouselItem"]{
  height: 100%;
}

[class*="CarouselItem"] > div {
  height: 100%;
}

[class*="CardLayout__Container"]{
  height: 100%;
}

It looks good on the preview mode but linkedIn plugin disapear on my website. I can see only bottom dots and arrows to slide without linkedin posts tiles

[Max]

Happy to see you on our forum @Kamil_Kucharski

I’ve shared your request with the devs and will get back to you a bit later

[Kamil_Kucharski]

I think I kinda figured it out, it works better, post tiles are aligned but content isn’t exactyl, it depends if is it a image or link in post

[class*="Main__Inner"] {
  height: 400px !important;
}

[class*="swiper-slide"]{
  height: 400px !important;
}


[class*="CarouselItem"]{
  height: 100%;
}

[class*="CarouselItem"] > div {
  height: 100%;
}

[class*="CardLayout__Container"]{
  height: 100%;
}

[class*="CardLayout__Block-sc-v8bjlj-0 CardLayout__RegularBlock-sc-v8bjlj-1 fQkzxc CardActionsBlock__CardLayoutBlock-sc-qzuptx-1 kDEeCy"]{
  display: flex !important;
  margin-top: 10px !important;
  flex: 1;
  padding-bottom: 8px !important;
  align-items: flex-end;
}

[class*="CardLayout__Block-sc-v8bjlj-0 CardLayout__RegularBlock-sc-v8bjlj-1 fQkzxc CardActionsBlock__CardLayoutBlock-sc-qzuptx-1 kDEeCy"]{
  height: 100%;
}

[class*="MediaContainer__Container"]{
  height: 100%;
}

[class*="CardLayout__Block-sc-v8bjlj-0 CardLayout__RegularBlock-sc-v8bjlj-1 fPCkvm"]::after{
  content: '';
  display: block;
  height: 80px;
}

Any extra tips to improve it are still welcome

[Max]

I’ve talked to the devs and they’ll try to customize the widget for you. I’ll let you know once the solution is provided

[Max]

@Kamil_Kucharski Thank you for waiting!

Our devs provided me with this code for your use case:

global-styles,
.swiper-slide,
.es-carousel-layout-item,
.es-carousel-layout-item > div,
[class*="CardLayout__Container-sc"] {
  min-height: 400px;
}

[class*="CardContainer-sc"] div:nth-child(2) {
  flex: 1;
  align-items: flex-start;
}

Please check it out and let me know if you like what you see

[Kamil_Kucharski]

Sorry for late respond, my solution was kinda good but when new type of post came for example with attached shared link it doesn’t work, also code you provided is not working, height of posts isn’t the same

[Max]

Hi there @Kamil_Kucharski

Please try to use this code instead:

global-styles,
.swiper-slide,
.es-carousel-layout-item,
.es-carousel-layout-item > div,
[class*="CardContainer-sc"] {
  min-height: 400px;
}

[class*="CardContainer-sc"] div:nth-child(2) {
  flex: 1;
  align-items: flex-start;
}

[Kamil_Kucharski]

It’s still not helping

[Max]

@Kamil_Kucharski I see that currently that code isn’t saved in the widget. I’ve double-checked it and it’s working fine:

Could you please test it out once again?