Help creating circles behind a text element

The_Attributes · February 14, 2023, 9:02pm

Hi there,

I’m trying to get a perfect circle around a piece of text wrapped in a div block. I set the radius to 50% and the border width to 5. Problem is that single digit numbers make the circle show up as an oval. Any thoughts on how to correct?

Here is my site Read-Only: Webflow - The Attributes

Stan · February 14, 2023, 9:59pm

hi @The_Attributes you have to your number wrap fixed width and height or use an aspect ratio 1/1.


.tf-bg-color{
height: 100%;
aspect-ratio: 1/1;
}

The_Attributes · February 15, 2023, 1:02pm

Thanks @Stan,

Any chance you can tell me my inputs? I’m still new to Webflow.

Stan · February 15, 2023, 1:07pm

Hi @The_Attributes you have 2 options

reset all Size settings in UI you have done and add provided code
reset all Size settings in U, set only height in UI and add provided code without height

The_Attributes · February 20, 2023, 1:15am

Hey @Stan,

This is as far as I got. Could you help me figure out what I’m doing wrong?

Stan · February 20, 2023, 1:28am

You have
1. wrapped CSS in script tag instead of style tag see code below.

<style>
.tf-bg-color{
height: 100%;
aspect-ratio: 1/1;
}
</style>

this code should be placed in the space above this mean in Inside <head> tag