Animation slide CSS aligning trouble

user_16494087 0
Viewed 65

I've made a 4 slide animation of text, that goes from right to left, but I cannot seem to understand how to fix this width and height error. I want the text to always be in the middle of the slides, but if you expand or scrunch your browser, it gets lost.

There's obviously a problem with the width and height, but I cannot seem to find the proper ratio that will always keep the text in the middle, no matter how you manipulate the browser window size.

The code is below:

.frame{
  border: 2px solid red;
  height: 80px;
  overflow: hidden;
}
.slidewrapper{
  border: 2px solid blue;
  width: 400%;
  height: 100%;
  animation: slideshow 24s;
  animation-iteration-count:infinite;
  position: relative;
   left: 30px;
   top: -150px;
}
.slide{
  text-align: center;
  height: 100%;
  width: 25%;
  float: right;
  padding-top: 4%;
  font-size: 13px;
}
.p1{
  background-color: hotpink;
}
.p2{
  background-color: blue;
}
.p3{
  background-color: teal;
}
.p4{
  background-color: green;
}
@keyframes slideshow {
  0%{margin-left: -10%  }
  25%{margin-left: -100% }
  50%{ margin-left: -200% }
  75%{margin-left: -300%  }
  }
}
<div class='frame'>
    <div class="slidewrapper">
      <div class="slide p1" style="color: blue">
        Free shipping and handling on order over $50. CODE:<i>FREE50</i>
      </div>
      
      <div class='slide p2'>  <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p3'> <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p4'><p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
    </div>
 </div>

flexbox css html
2 Answers

You need to specify a fixed padding-top instead of a percentage, where the padding is determined by a unit instead of the screen's dimensions:

    .frame{
      border: 2px solid red;
      height: 80px;
      overflow: hidden;
    }
    .slidewrapper{
      border: 2px solid blue;
      width: 400%;
      height: 100%;
      animation: slideshow 24s;
      animation-iteration-count:infinite;
      position: relative;
       left: 30px;
       top: -150px;
    }
    .slide{
      text-align: center;
      height: 100%;
      width: 25%;
      float: right;
      padding-top: 150px;
      font-size: 13px;
    }
    .p1{
    background-color: hotpink;
  }
    .p2{
    background-color: blue;
    }
    .p3{
    background-color: teal;
    }
    .p4{
    background-color: green;
    }
    @keyframes slideshow {
      0%{margin-left: -10%  }
      25%{margin-left: -100% }
      50%{ margin-left: -200% }
      75%{margin-left: -300%  }
      }
    }
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class='frame'>
    <div class="slidewrapper">
      <div class="slide p1" style="color: blue">Free shipping and handling on order over $50. CODE:
        <i>FREE50</i></div>
      <div class='slide p2'>
        <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i></div>
      <div class='slide p3'>
        <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i></div>
      <div class='slide p4'>
        <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i></div>
    </div>
  </div>

</body>

</html>

user_142512210

I would use flex for this. I have trimmed down your code a bit and added flex. You need to adjust the slide height so it has enough space for your content.

I didn't add any padding, so make sure you add a general padding to your slides (not only a top padding) so that it looks nice when the text hits the edges of your slide containers.

Notice the flex-direction column, which makes your text elements stack vertically like you probably want it to be, even if the slide has flex applied to it.

If you want all the text on the same line, just remove that line of css and it will be sorted out.

.frame{
  border: 2px solid red;
  height: 140px;
  overflow: hidden;
}
.slidewrapper{
  display: flex;
  width: 400%;
  height: 100%;
  animation: slideshow 24s;
  animation-iteration-count:infinite;
}
.slide{
  font-size: 13px;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.p1{
  background-color: hotpink;
}
.p2{
  background-color: blue;
}
.p3{
  background-color: teal;
}
.p4{
  background-color: green;
}
@keyframes slideshow {
  0%{margin-left: -10%  }
  25%{margin-left: -100% }
  50%{ margin-left: -200% }
  75%{margin-left: -300%  }
  }
}
<div class='frame'>
    <div class="slidewrapper">
      <div class="slide p1" style="color: blue">
        Free shipping and handling on order over $50. CODE:<i>FREE50</i>
      </div>
      
      <div class='slide p2'>  <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p3'> <p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
      
      <div class='slide p4'><p> Summer Sale </p>
        <b> Starting Soon!</b>
        <i>Exceptions apply</i>
      </div>
    </div>
 </div>

user_98824860
Related