# CSS conflicts when adding two different custom modules

**URL:** <https://community.hubspot.com/t/css-conflicts-when-adding-two-different-custom-modules/84715>\
**Category:** CMS Development\
**Created:** [July 5, 2023, 10:06am UTC](https://community.hubspot.com/t/css-conflicts-when-adding-two-different-custom-modules/84715 "2023-07-05T10:06:49Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![HadeelGamal](https://avatars.discourse-cdn.com/v4/letter/h/c37758/32.png) [@HadeelGamal](https://community.hubspot.com/u/HadeelGamal)\
**Post date:** [July 5, 2023, 10:06am UTC](https://community.hubspot.com/t/css-conflicts-when-adding-two-different-custom-modules/84715/1 "2023-07-05T10:06:49Z")

</div>

Hi everyone,

We are using Trust theme by Impact. We recently created two custom modules in one page. The problem we are trying to solve is that when we add custom module 1 it works fine but then when we add custom module 2 it looks like it affects the css of custom module 1 so it breaks. How can we avoid that? I am adding the code for both modules below. Thanks in advance.  
**Custom Module 1 HTML:**  
\<section class=“HSS” onload=“addAnimationClass()”\>  
\<div class=“container”\>  
\<div class=“bg”\>  
\<img class=“id-1” src=“[https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn\_5.jpg](https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn_5.jpg)” alt=“”\>  
\<img class=“id-2” src=“[https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/data\_science\_img\_hero\_section\_home\_page.jpg](https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/data_science_img_hero_section_home_page.jpg)” alt=“”\>  
\<img class=“id-3” src=“[https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn\_6.jpg](https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn_6.jpg)” alt=“”\>  
\</div\>  
\<a href=“#” class=“text”\>  
\<h6\>  
\<span data-id=“1”\>Planning and Buying\<span class=“capital-i”\>|\</span\>\</span\>  
\<span data-id=“2”\>Data Science\<span class=“capital-i”\>|\</span\>\</span\>  
\<span data-id=“3”\>Platform\</span\>  
\<span id=“line”\>\</span\>  
\</h6\>  
\</a\>  
\<h1\>Out-of-Home for the Performance Age\</h1\>  
\<p\>Maximize your reach and impact with our advance data-driven strategies and technology.\</p\>  
\<button\>  
\<a href=“[Contact](https://www.billups.com/contact?hsCtaTracking=de54b882-9340-4ea4-9a81-c4197f7a50ad%7C2a9086ae-a73e-4f71-90d9-642a47f658d5)”\>GET IN TOUCH\</a\>  
\</button\>  
\</div\>  
\<div class=“scroll-downs”\>  
\<div class=“mousey”\>  
\<div class=“scroller”\>\</div\>  
\</div\>  
\<script\>  
window.addEventListener(‘load’, function() {  
const elements = document.querySelectorAll(‘.fade-in-slide-up’);  
elements.forEach((element, index) =\> {  
element.classList.add(‘animate’);  
});  
});  
\</script\>  
\</div\>  
\</section\>

**Custom Module 1 CSS:**

@import url(‘[https://fonts.googleapis.com/css?family=SourceSansProLight](https://fonts.googleapis.com/css?family=SourceSansProLight)’);

.HSS \* {  
margin: 0;  
padding: 0;  
box-sizing: border-box:  
}

.html {  
font-family: “Source Sans Pro Light”;  
font-weight: 200;  
}

.HSS {  
min-height: 100vh;  
width: 100%;  
display: flex;  
align-items: center;  
justify-self: center;  
}

.HSS .container {  
width: 100%;  
max-width:1200px;  
margin: 0 auto;  
text-align:center;  
height: 100%;  
display: flex;  
align-items: center;  
justify-content: center;  
flex-direction: column;  
}

.HSS .bg {  
position: absolute;  
left: 0;  
top: 0;  
height: 100%;  
width: 100%;  
overflow: hidden;  
z-index: -1;  
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 0% 0% / 100% 100%, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 0% 0% / 100% 100%;  
}

.HSS .bg::after {  
content: “”;  
left: 0;  
top: 0;  
position: absolute;  
height: 100%;  
width: 100%;  
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 0% 0% / 100% 100%, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 0% 0% / 100% 100%;  
}

.HSS a {  
text-decoration: none;  
color: black;  
}

.HSS .mobile-text {  
display: none;  
}

.HSS h6 {  
display: flex;  
justify-content: center;  
font-size: 14px;  
font-family:Source Sans Pro ;  
line-height:52px;  
letter-spacing: 3px;  
color: black;  
text-transform: uppercase;  
position: relative;  
}

.HSS .container h1 span {  
margin-right: 50px;  
display: inline-block;  
justify-content: center;  
align-items:center;  
}

.HSS h1 {  
display:flex;  
justify-content: center;  
width: 50%;  
font-size: 44px;  
line-height:50px;  
letter-spacing: 0px;  
color: black;  
position: relative;  
}

.HSS .container h6 span {  
margin-right: 10px;  
display: inline-block;

}

#line {  
position: absolute;  
left: 0;  
bottom: 0;  
height: 0px;  
width: 150px;  
border: 2px solid #316fbc;  
pointer-events: none;  
z-index: -1;  
transition: 0.5s ease all;  
}  
.HSS .bg img {  
width: 100%;  
height: 100%;  
object-fit: cover;  
}  
.HSS .container p {  
color: black;  
font-size: 18px;  
max-width: %;  
margin-top: 20px;  
line-height: 32px;  
letter-spacing:0px;  
}

.HSS button {  
background-color:trasparent;  
display: inline-block;  
padding: 12px 52px;  
font-size: 12px;  
color:#ffff;  
font-family:Source Sans Pro;  
letter-spacing:1px;  
text-transform: uppercase;  
margin-top: 30px;  
cursor: pointer;  
}

@keyframes anima {  
0% {  
opacity: 0.6;  
transform: scale(1);  
}  
100% {  
opacity: 1;  
transform: scale(1.1);  
}  
}  
[@media](https://community.hubspot.com/t5/user/viewprofilepage/user-id/83477) only screen and (max-width: 768px) {  
.mobile-text {  
display: block;  
}  
.text {  
display: none;  
}  
}

.HSS .capital-i {  
color: #495057;  
margin-left: 20px;  
}

.HSS button:hover {  
background-color: #316FBC;  
}

.HSS button:hover a {  
color: white;  
}

@keyframes slideUp {  
0% {  
opacity: 0;  
transform: translateY(100%);  
}  
100% {  
opacity: 1;  
transform: translateY(0);  
}  
}

.HSS .text h6 span {  
animation: slideUp 1s ease forwards;  
animation-delay: 0.5s;  
}

.HSS h1 {  
animation: slideUp 1s ease forwards;  
animation-delay: 1s;  
}

.HSS p {  
animation: slideUp 1s ease forwards;  
animation-delay: 1.5s;  
}

@keyframes fadeInSlideUp {  
0% {  
opacity: 0;  
transform: translateY(100%);  
}  
50% {  
opacity: 0.5;  
}  
100% {  
opacity: 1;  
transform: translateY(0);  
}  
}

.HSS .text h6 span {  
animation: fadeInSlideUp 1s ease forwards;  
animation-delay: 0.5s;  
}

.HSS h1 {  
animation: fadeInSlideUp 1s ease forwards;  
animation-delay: 1s;  
}

.HSS p {  
animation: fadeInSlideUp 1s ease forwards;  
animation-delay: 1.5s;  
}

.animate {  
animation: fadeInSlideUp 1s ease forwards;  
animation-delay: 0.5s;  
}

**Custom Module 1 JS:**

const parentBgEl = document.querySelector(“.bg”);  
const childEls = document.querySelectorAll(“.HSS .container .text span”);  
const textEl = document.querySelector(“.HSS .text”);  
const lineEl = document.querySelector(“#line”);

childEls.forEach((el) =\> {  
el.addEventListener(“mouseover”, (e) =\> {  
const id = el.getAttribute(“data-id”);  
const bgEl = parentBgEl.querySelector(`.id-${id}`);

parentBgEl.querySelectorAll(“img”).forEach((img) =\> {  
img.style.display = “none”;  
img.style.animation = “”;  
});  
bgEl.style.display = “block”;  
bgEl.style.animation = “anima 1s ease forwards”;

// line animation  
const cords = el.getBoundingClientRect();  
const textCords = textEl.getBoundingClientRect();

lineEl.style.width = cords.width + “px”;  
lineEl.style.left = cords.left - textCords.left + “px”;  
});  
});

**Custom Module 2 HTML:**

\<script src=“[https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js](https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js)”\>\</script\>  
\<script src=“[https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js](https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js)”\>\</script\>

\<div class=“gsapcontainer”\>

\<section class=“panel”\>  
\<video class=“video-element” autoplay loop muted\>  
\<source src=“[https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Final%20Edit\_2\_1\_1.mp4](https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Final%20Edit_2_1_1.mp4)” type=“video/mp4”\>  
\</video\>  
\</section\>  
\<section class=“panel”\>  
\<img class=“image-element” src=“[https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Awards\_1.jpg](https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Awards_1.jpg)”\>  
\</section\>  
\<section class=“panel”\>  
\<video class=“video-element” autoplay loop muted\>  
\<source src=“[https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/algorand\_case\_study\_speed.mp4](https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/algorand_case_study_speed.mp4)” type=“video/mp4”\>  
\</video\>  
\</section\>  
\</div\>

**Custom Module 2 CSS:**

html {

overflow-y: scroll;

height: 100%;

/\* -webkit-overflow-scrolling: touch;

overflow-scrolling: touch; \*/

}

body {

overflow-y: visible;

position: relative;

height: unset;

}

html, body {

overflow-x: hidden;

margin: 0;

}

.gsapcontainer {

width: 300%;

height: 100vh;

display: flex;

flex-wrap: nowrap;

}

.gsapcontainer .panel {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

/\* align-items: center; \*/

/\* text-align: center; \*/

position: relative;

box-sizing: border-box;

/\* padding: 10px; \*/

}

.gsapcontainer .video-element {

width: 100%;

height: 100%;

object-fit: cover;

}

.gsapcontainer .image-element {

width: 100%;

height: 100%;

object-fit: cover;

}

**Custom Module 2 JS:**

gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(“.panel”);

gsap.to(sections, {  
xPercent: -100 \* (sections.length - 1),  
ease: “none”,  
scrollTrigger: {  
trigger: “.gsapcontainer”,  
pin: true,  
scrub: 1,  
snap: 1 / (sections.length - 1),  
end: () =\> “+=” + document.querySelector(“.gsapcontainer”).offsetWidth  
}  
});