CODEWITHSUNDEEP
htmlnode.jspug
Arun
Arun

Reputation: 3721

node js/jade error in css

I am trying to study node js. I converted a template to node js and it shows somme css problems. In the template there are social media icons of width = 30 px and padding 3px and border radius of 50%. It shows as a perfect circle in the original theme. But shows as ellipse in the node js converted theme. here is the css code

position: absolute;
width: 30px;
padding: 3px;
border-radius: 50%;
background: #e1e1e1;
font-size: 12px;

the converted theme works perfect when i change the padding to 9px. But i need to know wht this is happening. I tested this in google chrome. Please help.

the 1st one is from the original theme and the second one is from the node converted theme

original theme iconedited theme icon

Upvotes: 0

Views: 84

Answers (1)

Michael
Michael

Reputation: 26

To get a perfect circle, the width and height of the element have to be exactly the same. I made an example http://jsbin.com/fuxen/1/edit where I set the height: to 30px to match the height.

Furthermore I added text-align: center and a line-height: of 30px (to center the "f" vertically).

Upvotes: 1

Related Questions