KPC
Kevin Powell - Community•2y ago
roycwilliams

Element for iPad mobile responsive is different from the rest of the orientations.

So I have launched my digital agency's website and for some reason when looking at the iPad version the letters appear like they're in a box when it's not supposed to. I need help figuring out this problem HTML 
 <span style="font-size: 100px;" class="fast-flick">U</span><span style="font-size: 100px;" class="flicker">S.</span>
 <span style="font-size: 100px;" class="fast-flick">U</span><span style="font-size: 100px;" class="flicker">S.</span>
CSS including animation 
.sign {
  letter-spacing: 2;
  font-family: 'Epilogue', sans-serif;
  text-transform: uppercase;
  font-size: 6em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  animation: glow 2s forwards, flicker 3s infinite;
}

@keyframes blink {
  0%,
    22%,
    36%,
    75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }

  28%,
    33% {
    color: #EB8771;
    text-shadow: none;
  }

  82%,
    97% {
    color: #EB8771;
    text-shadow: none;
  }
}

@keyframes glow {
  0% {
    color: #000000;
    text-shadow: none;
  }

  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }
}

.flicker {
  animation: glow 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: glow 2s forwards, blink 10s 1s infinite;
}

@keyframes glow {
  0% {
    color: #000000;
    text-shadow: none;
  }

  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }
}
.sign {
  letter-spacing: 2;
  font-family: 'Epilogue', sans-serif;
  text-transform: uppercase;
  font-size: 6em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  animation: glow 2s forwards, flicker 3s infinite;
}

@keyframes blink {
  0%,
    22%,
    36%,
    75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }

  28%,
    33% {
    color: #EB8771;
    text-shadow: none;
  }

  82%,
    97% {
    color: #EB8771;
    text-shadow: none;
  }
}

@keyframes glow {
  0% {
    color: #000000;
    text-shadow: none;
  }

  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }
}

.flicker {
  animation: glow 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: glow 2s forwards, blink 10s 1s infinite;
}

@keyframes glow {
  0% {
    color: #000000;
    text-shadow: none;
  }

  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }
}
1 Reply
Chris Bolson
Chris Bolson•2y ago
it looks like your span (or parent) has overflow hidden. You could try adding overflow: visible; either to the containers or to the .flicker and .fast-flicker selectors.

Did you find this page helpful?