Looks NOT correct circle

I have a blue circle on the left most and a black circle on the right most at http://dot.kr/qna/221206circle/

I expected that each of the blue circle or the black circle is correct circle by “border-radius:50%”.

As I test it with chrome and IE, it looks correct circle on my desktop.

However when I test it with 2 mobile phones(Samsung phone and LG phone), it seems oval or ellipse instead of circle,

I don’t know why it looks a little longer from the top to bottom than from the left to right.

Can I fix it with your help?

Border radius of the circles with white background fill is 50px, not 50%;

I’m sure Paul will be along, with some proper advice.

Have you tried setting the height and width to the same values. Not sure you need that div inside of the anchor either. Just make the anchor the circle.

HTML

<a href='#' class='circle-link circle-link-malay'>MY</a>
<a href='#' class='circle-link circle-link-korea'>KR</a>

CSS

a {
  text-decoration: none;
}

.circle-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  font-family: sans-serif;
  font-size: 1.1rem;
  border-radius: 50%;
}

.circle-link-malay {
  position: fixed;
  top: 10px;
  right: 10px;
  color: white;
  background-color: black;
}

.circle-link-korea {
  position: fixed;
  top: 10px;
  left: 10px;
  color: white;
  background-color: blue;
}

1 Like

You set an equal width and height for the black/white circle, but the blue circle has no size or apect ratio define, so its size and shape are defined by its content.

1 Like