Responsive design with scrolling text

Question

I'm usually pretty good with getting things responsive but the scrolling text I am using is making it too complicated for me to work out!

I've got some fixed text, then the scrolling text with CSS animation, then another line of fixed text below. I can align them easily in the right place using absolute positioning, but I can't get it to behave responsively and it keeps throwing it out when I resize the screen. Tried adding a text wrapper to all the text to align that but it's not working.

I've had quite a play about with the code but hoping someone can help me :)

Any help really appreciated!

body {
  width: 100%;
  height: 100%;
  /* position: fixed; */
}

.header-wrapper {
  background: rgb(251, 186, 10);
  background: linear-gradient(40deg, rgba(251, 186, 10, 1) 0%, rgba(255, 212, 0, 1) 50%, rgba(255, 237, 60, 1) 100%);
  width: 1440px;
  max-width: 100%;
  height: 500px;
  margin: auto;
  /* position: relative; */
}

.all-text-wrap {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1440px;
  height: 500px;
  max-width: 100%;
  /* margin: auto; */
}

.content {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  height: 200px;
  overflow: hidden;
  font-family: "Lato", sans-serif;
  font-size: 70px;
  line-height: 80px;
  color: #ecf0f1;
  width: 800px;
}

.content__container {
  font-weight: 900;
  overflow: hidden;
  height: 55px;
  /* padding: 0 40px; */
}

.content__container__list {
  margin-top: 0;
  /* padding-left: 110px; */
  text-align: left;
  list-style: none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  padding: 0;
}

.content__container__list__item {
  line-height: 55px;
  margin: 0;
}

.intro-headline {
  position: absolute;
  top: 21%;
  left: 35%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 70px;
  font-family: "Lato", sans-serif;
  color: #2f2f2f;
  width: 800px;
}

.intro-subline {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 70px;
  font-family: "Lato", sans-serif;
  color: #2f2f2f;
  width: 800px;
}

@-webkit-keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

@-o-keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-o-keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

@-moz-keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

@keyframes opacity {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes change {
  0%,
  7.11%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  11.11%,
  18.22% {
    transform: translate3d(0, -11.11%, 0);
  }
  22.22%,
  29.33% {
    transform: translate3d(0, -22.22%, 0);
  }
  33.33%,
  40.44% {
    transform: translate3d(0, -33.33%, 0);
  }
  44.44%,
  51.55% {
    transform: translate3d(0, -44.44%, 0);
  }
  55.55%,
  62.66% {
    transform: translate3d(0, -55.55%, 0);
  }
  66.66%,
  73.77% {
    transform: translate3d(0, -66.66%, 0);
  }
  77.77%,
  84.88% {
    transform: translate3d(0, -77.77%, 0);
  }
  88.88%,
  95.99% {
    transform: translate3d(0, -88.88%, 0);
  }
}

<!DOCTYPE html>
<html lang="en">

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

<body>
  <div class="header-wrapper">
    <div class="all-text-wrap">
      <div class="intro-headline">DO SUMMER</div>
      <div class="content">
        <div class="content__container">
          <ul class="content__container__list">
            <li class="content__container__list__item">SUNRISE RUNS</li>
            <li class="content__container__list__item">MORNING COFFEES</li>
            <li class="content__container__list__item">PARK PICNICS</li>
            <li class="content__container__list__item">CITY STROLLS</li>
            <li class="content__container__list__item">STREET MARKETS</li>
            <li class="content__container__list__item">ARTS FAIRS</li>
            <li class="content__container__list__item">MUSIC FESTIVALS</li>
            <li class="content__container__list__item">ALFRESCO EVENINGS</li>
            <li class="content__container__list__item">URBAN SUNSETS</li>
          </ul>
        </div>
      </div>
      <div class="intro-subline">WITH US</div>
    </div>
  </div>
</body>

</html>

Answer 1

If I understood what you're looking for, here's a solution.

No absolute positioning, just match your line height with your scrolling text box's element height, and let the text rows flow. Use flex to position the whole thing horizontally (center).

Also don't force the width of the wrapper (.all-text-wrap), as the value you had (800px) leaded to some scrolling lines being wrapped. Let it grow as required by setting it as an inline-block with max-width 100%;

On small screens though, it won't look good, as scrolling lines will either overflow or have to wrap. I used media queries to change the value of variable --font-size to fix it (no wrapping required anymore). I could also have adjusted --line-height.

:root {
  --font-size: 70px;
  --line-height: calc(var(--font-size) + 0px); /*adjust line spacing */
}

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
}

.header-wrapper {
  width: 1440px;
  max-width: 100%;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  background: rgb(251, 186, 10);
  background: linear-gradient(40deg, rgba(251, 186, 10, 1) 0%, rgba(255, 212, 0, 1) 50%, rgba(255, 237, 60, 1) 100%);
}

.all-text-wrap {
  display: inline-block;
  max-width: 100%;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: #2f2f2f;
}

.content {
  height: var(--line-height);
  overflow: hidden;
  color: #ecf0f1;
}

.content__container__list {
  margin-top: 0;
  padding: 0;
  text-align: left;
  list-style: none;
  animation: change 10s infinite;
}

.content__container__list__item {
  white-space: nowrap;
}

@keyframes change {
  0%,
  7.11%,
  100% {
    transform: translateY(0);
  }
  11.11%,
  18.22% {
    transform: translateY(calc(-1 * var(--line-height)));
  }
  22.22%,
  29.33% {
    transform: translateY(calc(-2 * var(--line-height)));
  }
  33.33%,
  40.44% {
    transform: translateY(calc(-3 * var(--line-height)));
  }
  44.44%,
  51.55% {
    transform: translateY(calc(-4 * var(--line-height)));
  }
  55.55%,
  62.66% {
    transform: translateY(calc(-5 * var(--line-height)));
  }
  66.66%,
  73.77% {
    transform: translateY(calc(-6 * var(--line-height)));
  }
  77.77%,
  84.88% {
    transform: translateY(calc(-7 * var(--line-height)));
  }
  88.88%,
  95.99% {
    transform: translateY(calc(-8 * var(--line-height)));
  }
}

@media screen and (max-width: 900px) {
  :root {
    --font-size: 50px;
  }
}

@media screen and (max-width: 700px) {
  :root {
    --font-size: 40px;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --font-size: 30px;
  }
}

<!DOCTYPE html>
<html lang="en">

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

<body>
  <div class="header-wrapper">
    <div class="all-text-wrap">
      <div class="intro-headline">DO SUMMER</div>
      <div class="content">
        <ul class="content__container__list">
          <li class="content__container__list__item">SUNRISE RUNS</li>
          <li class="content__container__list__item">MORNING COFFEES</li>
          <li class="content__container__list__item">PARK PICNICS</li>
          <li class="content__container__list__item">CITY STROLLS</li>
          <li class="content__container__list__item">STREET MARKETS</li>
          <li class="content__container__list__item">ARTS FAIRS</li>
          <li class="content__container__list__item">MUSIC FESTIVALS</li>
          <li class="content__container__list__item">ALFRESCO EVENINGS</li>
          <li class="content__container__list__item">URBAN SUNSETS</li>
        </ul>
      </div>
      <div class="intro-subline">WITH US</div>
    </div>
  </div>
</body>

</html>