FROM CACHE - en_header

General Custom Liquid Question for CSS

Solved
Cbrownz
Shopify Partner
26 0 5

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?

Accepted Solution (1)

Accepted Solutions
GemPages
Shopify Partner
3556 802 659

This is an 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

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 4 (4)
GemPages
Shopify Partner
3556 802 659

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Cbrownz
Shopify Partner
26 0 5

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
Shopify Partner
3556 802 659

This is an 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

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Cbrownz
Shopify Partner
26 0 5

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