Hello, I would like to ask a question!
On my Shopify website I ended up adding some things on the outside to improve it but it wasn't 100% the way I wanted, I made a text carousel where it's practically the way I want it, but I would like to reduce the spacing between text and another and I can't solve it
<style>
.carousel-container {
overflow: hidden;
width: 100%;
white-space: nowrap;
position: relative;
font-size: 22.5px;
background-color: green;
align-items: center;
padding-top: 15px;
}
.carousel-wrapper {
display: inline-block;
animation: marquee 5s linear infinite;
width: 100%;
fonte-size:5px;
color:black;
font-family: "Black Ops One", system-ui;sans-serif;
}
.carousel-item {
display: inline-block;
margin-right: 10px; /* Espaçamento entre os textos */
fonte-size:50px;
}
.clone {
display: inline-block;
}
@keyframes marquee {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
@media screen and (max-width: 768px) {
.carousel-wrapper {
animation-duration: 5s;
font-size: 9px;
}
</style>
<div class="carousel-container">
<div class="carousel-wrapper">
<p>Free worldwide shipping on orders over $49.99! Don't miss out! </p>
</div>
<div class="carousel-wrapper clone">
<p>Free worldwide shipping on orders over $49.99! Don't miss out! </p>
</div>
</div
