-
Posts
-
An update to Enfold recently broke the Circle CSS style on images, seen here:
Featured Speaker Headshot should be a circle, and has a circle shadow around it. It now displays as a rectangle.
This CSS is above the circle CSS but is more specific it seems:
.avia-image-container.av-img-box-shadow .avia-image-overlay-wrap .avia_image, .avia-image-container.av-img-box-shadow.av-styling-circle .avia-image-container-inner, .avia-image-container.av-img-box-shadow.av-styling-circle .avia_image {
overflow: visible;
}than the circle CSS:
.av-styling-circle .avia-image-container-inner, .av-styling-circle .avia_image, .av-styling-circle .av-image-caption-overlay, .av-styling-circle div.av-caption-image-overlay-bg {
overflow: hidden;
-webkit-border-radius: 10000px;
-moz-border-radius: 10000px;
border-radius: 10000px;
}Please fix. I will add some custom CSS to address the issue on other sites:
.av-styling-circle .avia-image-container-inner, .av-styling-circle .avia_image, .av-styling-circle .av-image-caption-overlay, .av-styling-circle div.av-caption-image-overlay-bg {
overflow: hidden !important;
}Please let me know once you’re able to reproduce the issue and log the issue?
Hey Rob Marlbrough,
Thanks for the link to your site, I was not able to reproduce this, please disable the Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable the Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files so we can see the source of the css.
Can you log in to our support forum? You have sent this via an email form that is not appropriate for support requests.Best regards,
MikeThis is across many sites, not just one. I have CSS/JS merging and compression disabled, and I’ve cleared the page cache, the issue still exists.
Sorry my license seems to have expired, I will have to figure out how to revalidate.I did some more testing, and it only happens on the Image element when the Circle is chosen, and then Shadow is set to Outside, it happens. If there is no Shadow set, it is not an issue.
The correct CSS to fix the issue and show the shadow is:
.av-styling-circle .avia-image-container-inner, .av-styling-circle .avia_image, .av-styling-circle .av-image-caption-overlay, .av-styling-circle div.av-caption-image-overlay-bg { overflow: revert !important; }
- You must be logged in to reply to this topic.