CODEWITHSUNDEEP
htmlcss
josh
josh

Reputation: 123

CSS Marquee goes beyond the screen size on smaller devices

Have an unusual issue where by my css made marquee is going behind the size of smaller devices, there by extended the screen passed the containment div element size.

I've attached a picture for reference, I've checked all mobile devices and seems to have the issue there. the user can swipe to the right passed the screen size.

Picture showing the problem created by the marquee - https://i.ibb.co/7rkwJXJ/image.png

Essentially the right side of the vertical guide is passed the containment div size, there is nothing but white except for the marquee words moving left.

.marquee {
    display: flex;
    justify-content: center;
    margin: 0 0 40px 0;
}

.marquee-keywords-pink {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    font-weight: bold;
}

.marquee-keywords-pink span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-keywords 30s linear infinite;
    color: #faa2b0 !important;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.2em;
    font-family: var(--heading-font-family);
    animation-delay: -14s;
}

.marquee-keywords-two span {
    animation-delay: 1s;
}

@keyframes marquee-keywords {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
<div class="marquee">
<p class="marquee-keywords-pink">
<span>#Example Example #Example Example #Example Example #Example Example #Example Example </span>
</p>
<p class="marquee-keywords-pink marquee-keywords-two">
<span>#Example Example #Example Example #Example Example #Example Example #Example Example </span>
</p>
</div>

Upvotes: 0

Views: 1785

Answers (1)

Rado
Rado

Reputation: 739

You have to add position: relative and overflow: hidden to .marquee element. If are using absolute position to .marquee-keywords-pink you have to set and height like 40px to .marquee.

The overflow: hidden set on .marquee-keywords-pink is doing nothing as the element is expanding with its full width (eg 1400px). If you have an inner element with greater width, then it will cut it.

.marquee {
  position: relative;
  overflow: hidden;
  height: 40px;
  display: flex;
  justify-content: center;
  margin: 0 0 40px 0;
}

.marquee-keywords-pink {
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    font-weight: bold;
}

.marquee-keywords-pink span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-keywords 30s linear infinite;
    color: #faa2b0 !important;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.2em;
    font-family: var(--heading-font-family);
    animation-delay: -14s;
}

.marquee-keywords-two span {
  animation-delay: 1s;
}

@keyframes marquee-keywords {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
<div class="marquee">
  <p class="marquee-keywords-pink">
    <span>#Example Example #Example Example #Example Example #Example Example #Example Example </span>
  </p>
  <p class="marquee-keywords-pink marquee-keywords-two">
    <span>#Example Example #Example Example #Example Example #Example Example #Example Example </span>
  </p>
</div>

Upvotes: 1

Related Questions