CSS

Okay, I jumped onto a computer to view it. The issue is that you're trying to mix fixed widths with percentages, and you're trying to make responsive layouts with fixed widths, which isn't possible. Well, it's possible if you use max-width and account for height differences, but it can get wonky.

What I was seeing on the phone was completely different than what you're seeing on your desktop. I tried to fork your project so that I can show you the few adjustments that need to be made, but there's no anonymous way to do that. I'd have to sign in, and my codepen account uses my real name. So, I'll just paste the below.

This works great, for all viewports until you get down into mobile sizes, because 50% isn't wide enough at that point. What you should do is change everything that I set to 50% too 100% instead, and then use a min-width mobile media query at about 768px to change it to 75%, and then again to 50% at 1920px. That'll give you nice smooth transitions between breakpoints that look good on all devices. Keep in mind that if you're using images inside these slides, then they're going to skew if you set a defined height like you're doing. You need to change the height of the slide wrapper to auto, and the img tags to auto, otherwise you're going to skewing. Of course that'll make the slider shorter on smaller viewports. So, you can either use SRC set to display different images per viewport to accomodate the different aspect ratios, or you can use background images instead, and set them to background-size: cover and background-position: center center. That will allow the picture container to just kind of grow outward from the center of the image, showing more of it as the viewport size increases. SRCset is probably the better solution unless you're showing images where it doesn't matter if you cut part of the content out. Or, you can just let the slider get shorter as the viewport gets skinnier. That's not really uncommon.

Anyways, here's the full code I copied. I only changed a few things, but I copied the whole thing for ease. You can just copy, select all in the codepen window, and paste, rather than trying to figure out where everything goes. After you do that then evaluate what has changed and you'll understand what's going on.

body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  background: silver;

}

#slideshow {
  text-align: center;
  overflow: hidden;
  height: 510px;
  width: 50vw;
  margin: 0 auto;
}

.slide-wrapper {
  display: flex;
  overflow: hidden;
  width: fit-content;
  -webkit-animation: slide 18s ease infinite;
}

.slide {
  float: left;
  height: auto;
  width: 50vw;
}

.slide:nth-child(1) {
  background: #D93B65;
}

.slide:nth-child(2) {
  background: #037E8C;
}

.slide:nth-child(3) {
  background: #36BF66;
}

.slide:nth-child(4) {
  background: #D9D055;
}

.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -50vw;}
  50% {margin-left: -50vw;}
  60% {margin-left: -100vw;}
  70% {margin-left: -100vw;}
  80% {margin-left: -200vw;}
  90% {margin-left: -200vw;}
}