Our Team Showcase images aren’t displaying rounded in production like they are in the Elfsight preview. You can see the light gray circle that Elfsight has denoted as where it should be though.
I’m looking to compare two options:
Thanks!
Hello @SOPFC!
You can place this code into the Custom CSS field of your widget’s settings if you’d like to round the pictures:
.eapp-team-showcase-member-card-list-photoContainer {
border-radius: 50% !important;
}
And if you’d like to remove the grey circle and use square pictures instead, you can try this:
.eapp-team-showcase-member-card-list-photoContainer::after {
border: none;
}
Let me know if this helps!
Hmm, neither solution seems to work on my end.
Right now I have the rounded pictures CSS in place. Do you know why it might not be working?
I see that the Custom CSS was not saved in your widget so I went ahead and placed it there for you. The images should now be rounded on your website. Let me know if everything looks good now!
Amazing, it works!
Could you provide custom CSS to achieve the same rounded effect for the Logo Showcase widget?
The code below should achieve that!
.eapp-logo-showcase-logo-inner {
border-radius: 50%;
overflow: hidden;
}
Not sure if I’m doing something wrong again, but I’ve added that Custom CSS to the widget at Elfsight Apps and I’m not seeing it in production…
There might be a conflict with the styles on your website. Could you give me the link to the page where the widget is installed?
Yes, here it is, thanks.
There was indeed a conflict, so I adjusted the custom CSS in your widget, and it should all look good now on your website!