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
10 Replies
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
If you want them to be perfect circles you can a) set height and width or b) use aspect-ratio.
Ahh thank you for this, I’ll try aspect ratio, cause doing height and width made it funky for me
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)
I meant to set the width/heigt/aspect-ratio on the buttons. (or the container giving them their size)
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?
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
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
yep you are on the right path good luck 🙂