why are my borders not circular?

So, I’m not understanding why my borders for my numbers are more oval shaped than circular? I tried setting my calculator div to width:100px, height: 100px, but that seemed to break my 0 on the calculator, any advice? https://codepen.io/spencerrcr/pen/NWMeyGX
spencer
CodePen
NWMeyGX
...
10 Replies
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
Wolle
Wolle3y ago
If you want them to be perfect circles you can a) set height and width or b) use aspect-ratio.
Spencer
Spencer3y ago
Ahh thank you for this, I’ll try aspect ratio, cause doing height and width made it funky for me
Spencer
Spencer3y ago
Here’s an image of what happens when I do with and height of 100% , it cuts off a bit on the right on page reload, also I fixed it for the most part(padding issue)
Wolle
Wolle3y ago
I meant to set the width/heigt/aspect-ratio on the buttons. (or the container giving them their size)
Spencer
Spencer3y ago
I should just be able to do it in my section > div, I’d think since that targets all my divs under my section Both at 100%, should be right?
Mannix
Mannix3y ago
give them a fixed width and height place the text in the center with flexbox and adjust the width for the 0 as you want, you already adjusting border-radius for it anyway or for the text you can use line-height trick and set it to the equal to height value
Spencer
Spencer3y ago
Thanks for this and the code pen with it, I’ll mess around with it, my goal is a duplicate Apple Calculator I think I’m pretty close honestly, some of my CSS still needs to be cleaned up
Mannix
Mannix3y ago
yep you are on the right path good luck 🙂
Want results from more Discord servers?
Add your server