Height issue with social feed / box shadow

[Matt_Tozer]

Hi

Box shadow

I’m trying to match the box shadow used on the Elfsight social feed widget and apply it consistently to all cards in the section. The shadow looks fine overall, but on the first and last cards in a row, it’s getting cut off on the outer edges.

This is what I am using but could be very much wrong.

[class*=“CardContainer-sc-”] {
border: none;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
}

[class*=“CardContainer-sc-”]:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

There’s also an issue with the height of the cards — when a post doesn’t have any comments or likes, the height is noticeably shorter than the others. This throws off the layout and doesn’t look very tidy. I’ve attached a picture to show what I mean.

Would it be possible to help with some CSS to fix both the shadow display and to make sure all cards stay the same height, even when content like comments or likes are missing?

Thanks

Matt

[Max]

Hi there, @Matt_Tozer

Sure, I’ll be happy to help

I’ve checked your widget in the configurator and all cards have almost the same height:

Do I get it right that the larger height difference appears only on your website? If this is the case, please send me a link to the page, where your widget is installed.

As for the cropped edges, I see that it occurs with the bottom edges of each post, not just with the first and last post. Is that what you meant?

[Matt_Tozer]

Hi Max,

First off, I just want to say that I absolutely intend to purchase and use the widget once the issues are sorted and the website is ready to launch.

At the moment, unfortunately, I can’t provide a live link to the site, but I’ll do my best to explain the two key issues I’m facing.

1. Height Discrepancy
Yes, you’re right - in your image the cards do seem to have a slight height difference. However, on my website, this height inconsistency becomes much more pronounced than shown in your screenshot. It seems to expand significantly across the row, particularly when viewed on different screens or breakpoints.

2. Box Shadow Issues
There are a few things happening here:

• I’m using a 4-column layout. On the first and last columns (outer edges), the box shadow is being cut off - I’ve highlighted this in orange.
• Additionally, the bottom edges of all boxes are missing the shadow effect - also marked in orange. Marked in green is where the box shadow works.
• I’ve applied rounded corners to the boxes, but the shadow itself doesn’t follow those curves. You’ll see this noted in yellow circles in the screenshots (though not every instance is marked).

The shadow issue is probably down to how I’ve styled it, but I’m still building confidence with CSS, so any support or guidance would be really appreciated.

One final thought - would it be possible to add a hover box shadow effect in the social feed widget for future versions, similar to what’s available in other widgets?

Thanks again for your time and support - looking forward to hearing your thoughts.

Best regards,
Matt

[Max]

Got it, thank you so much!

Here is the CSS code to align cards by height:

[class*="Counters__Title-sc"] {
  line-height: 16px;
}

To avoid issues with the shadow cropping, you should add use this CSS code:

.es-carousel-layout-item {
  margin: 15px;
}

If these code work only in the configurator, but not on the website, we’ll need temporary access to your website’s backend:

• login link

• temporary login

• temporary password

Please send me this info in a personal message. For this, click on my profile image and choose Message