General Custom Liquid Question for CSS

[Cbrownz]

Hello, so I have added a custom liquid to my homepage and began adding css code to perform a specific design I want. I notice though that this css code is then applied to the whole home page.

Is there a way to have it so it only is applied to the specific section?

[GemPages]

Hello @Cbrownz 

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

[Cbrownz]

https://cardboardcathomes.com/

This is the css:

<p class="moving-text"><strong>testing now</strong> testing scroll css</p>

<!-- The styles -->
<style>
div {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
/* Makes the animation pause on hover */
.moving-text:hover{
animation-play-state: paused;
}

/* The animation */
@keyframes marquee{
0%{transform: translateX(100%);}
100%{transform: translateX(-100%);}
}

/* media query to enable animation for only those who want it */
@media (prefers-reduced-motion: no-preference) {
.moving-text{
animation: marquee 35s linear infinite;
}
}
</style>

[GemPages · Accepted solution]

Hello @Cbrownz 

You can modify your code a bit as follows

<p class="moving-text cb-custom"><strong>testing now</strong> testing scroll css</p>

<style>
div {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
/* Makes the animation pause on hover */
.moving-text.cb-custom:hover{
animation-play-state: paused;
}

/* The animation */
@keyframes marquee{
0%{transform: translateX(100%);}
100%{transform: translateX(-100%);}
}

/* media query to enable animation for only those who want it */
@media (prefers-reduced-motion: no-preference) {
.moving-text.cb-custom{
animation: marquee 35s linear infinite;
}
}
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[Cbrownz]

Sadly this css is still effecting other elements on the page, had it worked for you?