CODEWITHSUNDEEP
htmlcssresponsive-designborder
Paul
Paul

Reputation: 3368

Border not lining up for a circle

I am running into an issue in my mobile media query - anything under a 640px viewport. I have a circle that comes together and forms a full circle (see snippet), but for some reason in my media query, the circle doesn't quite line up, and I am unsure why as I am using the same math that makes it work in a desktop version.

Here is what it looks like within the 640 media query:

enter image description here

So how this works is I give .circle the same height and width. So let's say 200px for both height and width.

Then the class of .spinner, I divide the height and width of the .circle by two. So I would have 125px for height and width.

Then I set the border size, so lets use 5px. What I do is add that border size to the height and width numbers of .spinner and use that figure, which would be 130px to everything else ranging from .top, .bottom, q2, mask, etc.

That is how I get this to work and my math in my media query is not wrong. Does anyone see why this isn't lining up? 

.blue {
  background-color: blue;
  width: 100%;
  height: 600px;
}

.circle {
  z-index: 99;
  width: 500px;
  height: 500px;
  position: absolute;
  background: inherit;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
}

.spinner {
  width: 250px;
  height: 250px;
  position: absolute;
  border: 5px solid #b5f2ff;
  z-index: 10;
}

.top {
  top: 255px;
  left: 255px;
  border-radius: 0 0 255px 0;
  border-left: none;
  border-top: none;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.bottom {
  border-radius: 255px 0 0 0;
  border-bottom: none;
  border-right: none;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
}

.topright,
.bottomleft {
  -webkit-animation: rotate90 4s linear forwards;
  animation: rotate90 4s linear forwards;
}

.topleft,
.bottomright {
  -webkit-animation: rotate180 4s linear forwards;
  animation: rotate180 4s linear forwards;
}

.mask {
  width: 255px;
  height: 255px;
  position: absolute;
  opacity: 1;
  background: inherit;
  z-index: 15;
  -webkit-animation: mask 4s linear forwards;
  animation: mask 4s linear forwards;
}

.q2 {
  top: 0;
  left: 0;
}

.q4 {
  top: 255px;
  left: 255px;
}

@-webkit-keyframes rotate90 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20%,
  80% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes rotate90 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  20%,
  80% {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes rotate180 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40%,
  60% {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes rotate180 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  40%,
  60% {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes mask {
  0% {
    z-index: 15
  }
  40%,
  60% {
    z-index: 4
  }
  100% {
    z-index: 15
  }
}

@keyframes mask {
  0% {
    z-index: 15
  }
  40%,
  60% {
    z-index: 4
  }
  100% {
    z-index: 15
  }
}

#circle-text {
  display: none;
  position: absolute;
  color: #FFF;
  font-size: 2.3em;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
}

@media screen and (max-width:640px) {
  .circle {
    z-index: 100;
    width: 250px;
    height: 250px;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  .spinner {
    width: 125px;
    height: 125px;
    z-index: 10;
  }
  .top {
    top: 130px;
    left: 130px;
    border-radius: 0 0 130px 0;
  }
  .bottom {
    border-radius: 130px 0 0 0;
  }
  .mask {
    width: 130px;
    height: 130px;
  }
  .q4 {
    top: 130px;
    left: 130px;
  }
}
<div class="blue">
  <div class="circle">
    <div class="spinner top topright"></div>
    <div class="spinner top topleft"></div>
    <div class="spinner bottom bottomleft"></div>
    <div class="spinner bottom bottomright"></div>
    <div class="mask q2"></div>
    <div class="mask q4"></div>
  </div>
</div>

Upvotes: 0

Views: 59

Answers (1)

andi
andi

Reputation: 6522

You have an inconsistent use of box-sizing:border-box in your CSS. It's being used in media queries, so that it doesn't apply to all screen sizes. And it would mess up your calculations.

Upvotes: 1

Related Questions