Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I originally wanted to use the circle icon widget but Large is too small. I read that you recommend using the Features Widget instead but I seem to get weird scaling issues
When I used an svg that is a circle I can get it to fit nicely but I’m wondering why this is happening.
Can I manually modify the Large size for the circle icon widget?
Can anybody tell me why this scaling thing is happening?
Hi Blindpet
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Unfortunately I do not at the moment as I’m just running a local dev site in a virtual machine. I’ll see if I can find time to move things to a VPS.
Could you still tell me how to modify the large size for the circle icon widget? I’d love to be able to customize it in a GUI setting somewhere if that is possible.
This is a private message.
Thanks. Try adding to Appearance > Custom CSS:
.sow-icon-image { background-repeat: no-repeat; }Thank you, that seemed to fix the extra bit at the bottom. However, I realized I was using already circled images. When I use regular svg it does strange things like I showed in the original post. A demo is live on the site now.
I’d rather change the circle icon large size as it seems to fit everything perfectly. Can you tell me how to do that?
Actually the circle widget I have the same problem where the svg seems to stretch more than it should.
Please use the https://wp-bullet.com to see how it looks now
With regards to stretching, I’m not sure what we can do with the widget as it stands. The custom image is added as a background. Check out “Saves You Time” for example. The selector that the image is applied to has the following rule attached to it:
.widget_circleicon-widget .circle-icon-box.circle-icon-size-large .circle-icon { width: 100px; height: 100px; -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }What this means is that your background image gets a width and height of 100px. Your background image in this case is 93px x 79px which is why it’s being stretched.
I have a hard time believing it is not possible to make the svg or png autoscale, autovertically align and center. I have tried all of the snippets to no avail.
If you check the site again the widget seems to be now clipping the bunny png I’m trying.
Please help me create a 200 pixel round container where i can put an svg or png inside centered and aligned.
If you look at the middle orange cloud it is still not centered compared to the circle icon above. I’m going nuts.
.sow-icon-image { background-repeat: no-repeat; background-position: center; vertical-align: middle; background-size: contain; overflow:hidden; } .sow-icon-container .sow-container-round { vertical-align: middle; background-size: contain; overflow:hidden; }I feel your frustration. From the support team side of things we can only do so much in terms of hot fixing a widget using CSS. At some point, we need to log a bug report and move the matter along to the development team so the problem can be properly resolved.
For the rows with SVG’s sticking out, try editing the Features widget and insert the following into the CSS Styles field which is under the Attributes tab:
Thank you for your attempt, unfortunately that css didn’t work. If you could pass these bugs along to the development team that would be great. (Please let me know when you’ve taken screenshots and gotten the page source)
As you can see I have done a hacky workaround and gotten the images to work by placing them in a transparent circle in Illustrator.
Hope to see this fixed in a future version.
Thanks for your understanding. I’m logging this issue right now. Hopefully our Widgets Bundle developer will be able to resolve very soon.
I work in support too (voluntarily without pay!) so I try to be understanding. Thank you for submitting his issue.
Can you confirm you have the screenshots and html code now so I can remove the non-working images?
Thanks again for your understanding, we really appreciate it.
If possible, please, could you create a test page for us and use the Page Builder Prebuilt button to clone the home page. We could then list that test page in the bug report. That would be super helpful.