Hello Site Origin Theme,
I want a circle icon that has an image instead of an icon, I know this can be done using Site Origin Features Widget or with the Circle Icon. I find myself with the following problem:
Circle widget: Large is just too small, I tried adding some CSS to make it bigger but the it overlapped the container.
.widget_circleicon-widget .circle-icon-box.circle-icon-size-large .circle-icon {
width: 250px;
height: 250px;
}
Site Origin Features: I uploaded the image (size 300x300px) and selected “circle” icons. The icon does not have the circle shape and It seems to be loading the image thumbnail or something because the image is 150×150 px causing it to look low-res.
Here is a page I did just to show you guys the issue: http://electricaixtapa.com/icon-trouble-thanks/
Thanks,
hope you can help!
J.
Hi Jose
I based the following off the Circle Icon widget in small size but given this Custom CSS it shouldn’t matter what you set that to. Give the below a try:
/* Circle Icon Widget */ .widget_circleicon-widget .circle-icon-box .circle-icon { width: 250px; /* New size */ height: 250px; /* New size */ -webkit-border-radius: 500px; /* New size x 2 */ -moz-border-radius: 500px; /* New size x 2 */ border-radius: 500px; /* New size x 2 */ } .widget_circleicon-widget .circle-icon-box.circle-icon-position-top .circle-icon { margin-left: -125px; /* New size / 2 */ } .widget_circleicon-widget .circle-icon-box.circle-icon-position-top { padding-top: 260px; /* New size +10px */ }