Better way to do this?

https://gfriends.incredulation.com

Looking for suggestion on the best way to create a circle with perfectly centered text inside of it (not an image, though). On the page above (under construction and not yet live), you can see three circles under “Who We Are” that were created with a couple of BluePrint One stacks - and some extra margin above the first line of text. It works, but the circles are not perfectly round on smaller devices. Hoping someone smarter than me knows a better solution.

gf

I had a similar question to this ages ago and Tav made me a project using various SP stacks. I’ll dig it out and share it tomorrow for you.

1 Like

Many thanks, @steveb! Much appreciated.

Maybe:
https://stacks4stacks.com/porthole
you can try before you buy

2 Likes

Yes, Porthole would work. I use it from time to time. Sometimes it can be a fiddle getting the text to resize to precisely what you want, but you normally get there after some trail and error.

Here is the project Tav did for me. Weirdly, it no longer seems to retain the round shape, ironic as it’s called always round. There is most likely a simple reason for it, as in, I’ve messed it up, or something has changed in one of the stacks, or tav lied to me. I think it did work though, so I suspect it’s the former! But you might be able to fix it.

3 Likes

Too effi’n easy:

  • SPro
  • Set SPro height to be 100% it’s width (ie square)
  • Set SPro content to be vertically centred
  • Add SPro border child
  • Set border corner radius’s to 50%
  • Add SPro background and give it a colour (you could try giving it a color but that’s just stupid)
  • add content

Bingo

If you really want to buy something to do that I’d be more than happy to sell you one for $5, I could even do a discount if you wanted multiple ones in different sizes and colours, hows $4 a piece with a minimum order of 20 variations

5 Likes

What Paul says

1 Like

The better way is just not to do it. I would ask why have text in circles when you view pages on small rectangular devices. Unless you have bugger all text you will end up with a lot of wasted space. This sounds like a non web developer requirement. Also circles I think are looking a bit old.

Hey! @Webdeersign I’ve got several hundred virtual children to feed, stop trying to steal food from their mouths.
If the man wants circles and I’ve built a business that provides that need you’re not helping, in fact I’ve got a team of lawyers champing at the bit to have a go, they had much big success going after the fool who disparaged my ‘Any Square, any size’ js plugin … consider yer self on notice!

Ha. Of course didn’t mean it in that way but sometimes the easy way is best.

You will make a fortune with Weavers wanting to create silly stuff with wacky animations that add complexity and potential problems.

‘Potential problems’ … too dam right … potential problems that’ll be fixed in the v2 paid upgrade.
I’ll be rolling in it by Christmas.

Exactly what Paul said. They were not circles in the original design, but the person I’m working with has a graphic artist on-staff, and the site is being tweaked according to her wishes. I have thoughts on how things should look, but ultimately if the client is happy, than so am I. Conversely, if they aren’t happy, I don’t get the recommendations or follow-up work. So, circles it is. :)

Many thanks, Paul - your step by step directions made perfect sense. And, thanks Tav for making the BWD stacks - you guys make my job so much easier (read: possible).

1 Like