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>
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>
this worked for me, do you have an idea why this marquee isnt working on ios? for android it works perfectly, for ios it shows it 1 time then doesnt for 30s then repeats after 30s
I have not idea, you have to test it. The first that pops up in my mind is to use prefix –
working perfectly fine on android and PC but ye only shows every 15 seconds in IOS.
