How do I stop my CSS marquee from changing the horizontal width of the website?

Issue

The <marquee> tag is depreciated, so I am trying to implement a marquee with CSS (following this tutorial). Below is my HTML & CSS, and when you run it, you’ll notice the website starts out as super wide with a scroll bar at the bottom, and the width of the website slowly decreases till the bar disappears. It also goes outside of the <div> block element.

How do I fix it so that it starts and finishes at the edges of the <div> block element without altering the width of the site?

.marquee{
    background-color: black;
    color: blue;
    font-size: 3em;
    margin-top: 2rem;
}
.myMarquee{
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%); 
    transform:translateX(100%);
    -moz-animation: marqueeAnimation 15s linear infinite;
    -webkit-animation: marqueeAnimation 15s linear infinite;
    animation: marqueeAnimation 15s linear infinite;
}
@-moz-keyframes marqueeAnimation {
    0%   { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marqueeAnimation {
    0% { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
}
@keyframes marqueeAnimation {
    0% { 
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% { 
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

<!DOCTYPE html>
<html>
    <head>
    <link href = "index.css" rel = "stylesheet" type = "text/css" />
        <meta charset = "utf-8" />
        <title>Mainpage</title>
    </head>
    <body>
        <div class="marquee">
            <p class = "myMarquee">Scrolling Text</p>
        </div>
    </body>
</html>

Solution

Below is one way you could go about resolving the overflow issue you describe. The only real CSS properties of interest in this case are the max-width and overflow properties applied to the parent container.

max-width: 100% prevents your container from running beyond it’s bounds and overflow: hidden clips the content so no scrollbars appear.

.marquee {
  max-width: 100%;
  overflow: hidden;
}

.marquee {
  max-width: 100%;
  overflow: hidden;
  margin: 2rem auto;
  font-size: 3em;
  color: blue;
  background-color: black;
}

.marquee__items {
  display: flex;
  align-items: center;
}

.marquee__item {
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
  padding: 0 2rem;
  list-style: none;
}

.marquee__item {
  -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-animation: marqueeAnimation 15s linear infinite;
     -moz-animation: marqueeAnimation 15s linear infinite;
          animation: marqueeAnimation 15s linear infinite;
}

@-moz-keyframes marqueeAnimation {
  0% {
    -moz-transform: translateX(100%);
  }

  100% {
    -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes marqueeAnimation {
  0% {
    -webkit-transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes marqueeAnimation {
  0% {
    -webkit-transform: translateX(100%);
       -moz-transform: translateX(100%);
            transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(-100%);
       -moz-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

<section class="marquee">
  <ol class="marquee__items">
    <li class="marquee__item">Scrolling Text 01</li>
    <li class="marquee__item">Scrolling Text 02</li>
  </ol>
</section>

Answered By – Ken

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Issue

Solution

Leave a Reply Cancel reply