Kevin Powell - Community•17mo ago

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•17mo 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.

Gaming

Programming

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