CSS is not rendering

[SAU]

Hi have designed my template using html and CSS

When I try to add a header and footer in the design manager using the custom HTML, some of the styles are recognised whilst some aren't. When I go to developer tools using chrome the styles that should be attached are not for some reason. They are not being overwriten by other styles, they are simply not there but some others are.

I'm an experienced front end developer and have worked within many other systems and I am stumped as to why this may be occuring. It's almost like HS is stripping code.

[vesse]

If someone else runs into having their minified CSS mystically ending when served from HubSpot but being just fine in the developer file system it may be caused by minified CSS with ID selector being handled as a HubL comment if it is preceded by a curly bracket. For example, this CSS

@media(min-width: 600px) {
  #test {
    background-color:red;
  }
}

when minified looks like this

@media(min-width:600px){#test{background-color:red;}}

which, when served from HubSpot via the HubL thingie, is returned to the browser as

@media(min-width:600px)

If your setup does not really go well without the minification of CSS in build phase and getting rid of ID selectors is out of the question too, you can use the attribute selector to bypass the issue, ie. instead of #test use div[id='test'] { ... }

[stefen]

@SAU are you adding the stylesheet in the head through the COS menu? Or are you adding it through a HubL code? If you are including your stylesheet using an unlocked hubl module and you've edited the page, this can cause the updated stylesheet (or javascript) not to load because it's using the old file.

Another thing you could try to debug is add the query/parameter "?hsDebug=True" to the end of your URL so you can see the un-minified files and comments. Might help you track down what's going on.

[SAU]

I am attaching the stylesheet for my template by going to edit/Edit Head and then selecting the stylesheet "Attach Stylesheet".

It is reading some of the styles but not all of it.

[SAU · Accepted solution]

Ok,

Think it turns out it does not like a minified stylesheet