Image Radius On Feature Box
Alison
Hi
I am using feature box and I want the image to be round. I put in a Border Radius of 200 on the image and the image look circlular on the SPPB edit page. But when I publish the page the image is square.
Can you help please?
Image showing edit page showing image settings and result on the edit page is here https://postimg.cc/62YVK4yG
Image showing published page is here https://postimg.cc/fVcBFLjY
thanks Alison
Paul Frankowski
Accepted AnswerAlison, you can always create a custom class name, and use it in addons or even articles which should have radius-border for image. It's time saver and so simple, I'm surprised no one here has come up with it ;]
- Inside template custom.css or Custom CSS area add:
.circle img { border-radius: 100% !important; }
- Then inside selected Addon settings > Style (tab) > CSS Class :
circle
And yes, 100% is better than px value. Becuase it gives you real circle shape regardless of image size.
Mehtaz Afsana Borsha
Accepted AnswerHI
Thanks for contacting us. You can use this CSS in your custom.css file
img.sppb-img-responsive {
border-radius: 200px !important;
}-Regards.
Alison
Accepted Answerhi Mehtaz
That works, but it makes all images throughout the site round. I just want these specific images to respond to the setting - is that possible?
Mehtaz Afsana Borsha
Accepted AnswerSorry for that, could you please mention which portion exactly do you want to change?
Alison
Accepted AnswerJust images in the specific Feature Boxes where I have set the radius to 200px like in the image shown
They show as round on the edit page, but not on the published page. https://postimg.cc/fVcBFLjY
Alison
Accepted AnswerThank you Paul, that is brilliant.
And you have just taught me something I will be able to use ongoing.
5 Star *****