I am having an issue where I want the css style in a custom liquid section to stay in that section, instead it effects other elements on the page if that makes sense.
I am wondering is there a bracket I can put around this css in order to ensure the style is not placed on other elements in the page.
Here is the css:
testing now testing scroll css
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;
}
}
Thank you for any help!
@Cbrownz - you can add that particular section id to css, so it will affect only that section, example
#section_id div {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
now only the div’s in this section will be changed, other elements will stay as it is
1 Like
Ok thanks, so I made this change but it seems to have taken away those paramters. How do I get the section id of a custom liquid in shopify?
@Cbrownz - you can go to that page on browser, right click and click on inspect, you will have ids of all sections and all html code, you can get from there, else share the page link of this custom section, I will give it to you
Absolutely fantastic work, thank you.
From your experience what is a good resource I can use that can teach me valuable thing such as this?
You can check w3school website