Module not updating css

Develop, Build & Integrate CMS Development
1

I have created two modules that are very similar but have slight differences.
They are both a background image with a heading and text,
though the newest one has a smaller width and padding.
They have different names but are in the same location.
What i don’t understand is that when i use the module in the page-editor, it displays the styles of the first/old module, even though i use the new module. When i publish the page, it also displays the styles of the new one.
Here are the styles for the first/old one:
.img-bcg-textarea h2 {
font-family: ‘Montserrat’, sans-serif;
color: #9DB8FE;
font-size: 40px;
width: 500px;
word-break: break-word;
padding-left: 2rem;
padding-right: 4rem;
width: 100%;
}

And here are the styles for the new module:
.img-bcg-textarea h2 {
font-family: ‘Montserrat’, sans-serif;
color: #9DB8FE;
font-size: 40px;
word-break: break-word;
padding-left: 2rem;
padding-right: 1rem;
}
They are both in the module.css adjacent to the html-files for the connected module.

2

Hi @JulJakobsen

Would you be able to post an example page with the issue?

If I am reading this correctly, both modules are being used on the same page. If that is the case, it is important to note that the css is not scoped to a module so the css will cascade as expected with the last rule winning.

@jonchim , @piersg might have more educated insights than mine :grinning_face:

3

Hey @dennisedson @JulJakobsen

That is my guess too, that both modules are on the page and the second set of css taking precedence. But if you want to send us a link we can take a closer look