I am attempting to design a badge that hovers above my cart icon and shows the total number of items currently in the cart.
However, I have encountered an issue where the badge appears as an oval shape rather than a perfect circle. Can anyone assist with figuring out what mistake I may have made?
const cartStyle = {
width: "48px",
height: "48px",
verticalAlign: "middle",
float: "right",
marginBottom: "0",
backgroundImage: `url(${ShoppingCart})`
};
const badgeStyle = {
content: "0",
background: "white",
display: "inline",
position: "relative",
borderRadius: "50%",
width: "36px",
height: "36px",
padding: "8px",
left: "15px",
border: "2px solid #666",
color: "#666",
textAlign: "center"
}
class Cart extends Component {
render() {
return(
<div className="cart" style={cartStyle}>
<div style={badgeStyle} > { this.props.cartProducts.length } </div>
</div>
);
}
}