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 |
---|---|
183 | |
169 | |
77 | |
56 | |
45 |
Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...
By Jasonh Dec 8, 2023Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023