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?
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!