Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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
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
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>
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
Sadly this css is still effecting other elements on the page, had it worked for you?
User | RANK |
---|---|
129 | |
92 | |
77 | |
70 | |
41 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022