# Module conflicting CSS rule

**URL:** <https://community.hubspot.com/t/module-conflicting-css-rule/117338>\
**Category:** CMS Development\
**Tags:** local-development, css\
**Created:** [September 30, 2024, 2:45pm UTC](https://community.hubspot.com/t/module-conflicting-css-rule/117338 "2024-09-30T14:45:49Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MUlHuq](https://avatars.discourse-cdn.com/v4/letter/m/90db22/32.png) [@MUlHuq](https://community.hubspot.com/u/MUlHuq)\
**Post date:** [September 30, 2024, 2:45pm UTC](https://community.hubspot.com/t/module-conflicting-css-rule/117338/1 "2024-09-30T14:45:49Z")

</div>

Hi,

I’m facing a strange issue with a custom module I’ve developed for my pricing cards. Everything works fine when previewed using certain themes (like boilerplate themes) or design previewer, but when I apply it to a default HubSpot theme/template, the CSS breaks.

Specifically, I’m using an **absolute-positioned gradient borders** on each card, alternating between the left, top, right, and bottom sides, based on the loop index in HubL. While the top and bottom borders render correctly in all themes, the **left and right borders shift to the center of the card** instead of aligning to the edges in the default theme. This issue only happens in the default theme, while in the design preview and boilerplate theme, the borders appear exactly where they should.  
Can the module be kept as it is, irrespective of the theme/template?

---

<div class="post-metadata">

**Author:** ![KhushbooP11](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/khushboop11/32/8252_2.png) [@KhushbooP11](https://community.hubspot.com/u/KhushbooP11)\
**Post date:** [September 30, 2024, 3:59pm UTC](https://community.hubspot.com/t/module-conflicting-css-rule/117338/2 "2024-09-30T15:59:35Z")

</div>

Hi @MUlHuq,

It sounds like there’s a CSS conflict between your custom module and the default HubSpot theme’s styles. To keep your module’s styles consistent across themes, try these steps,

Solutions:  
Increase the specificity of your CSS selectors (e.g., #module-id .border-left) to override any conflicting styles from the theme.

If it’s still not working, use !important on the properties (e.g., left: 0 !important;) to force your styles to apply.

Use the browser’s dev tools to inspect the default theme and see which CSS rules are causing the shift. You might need to adjust positioning or margin values accordingly.

If possible, use the Shadow DOM in your custom module to encapsulate your CSS, preventing conflicts with the parent theme styles.

This should help keep your module looking consistent no matter which theme is used!

I hope it helps, let me know if you need to [talk](https://calendly.com/khushboo-pokhriyal/30min?month=2024-08)!

Khushboo Pokhriyal

Growth & Operations

GroRapid Labs

[LinkedIn |](https://www.linkedin.com/in/khushboopokhriyal)9315044754 | [Email |](mailto:khushboo.pokhriyal@grorapid.com)[Website](https://www.grorapidlabs.com/)