CSS Not updating

[Jopitts]

All,

I've got a slightly odd situation.  In my design manager I can find this file:fwds_styles--mobile.css.  

in the website I can see this file is being used:template_fwds_styles--mobile.min.css

Everything I've read says that HubSpot isn't renaming the file automatically, however how can I change the css when the filenames don't align?  I've made an edit, published it, but nothing has changed on the front end (which I'm not 100% suprised at given the different file names)

[alee303 · Accepted solution]

Hey Jopitts!

Have you tried clearing the cache? this might be related to browser caching or server-side cache.
I did some research prior and found another discussion that may be similar to your issue here

Hope this helps!

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.

[alee303 · Accepted solution]

Hey @Jopitts ! 

If possible are there any screenshots, error messages, or further details you can provide? is this a custom theme you're working with? and have you tried a hard refresh on the page? 

If the concern is why the file is called fwds_styles--mobile.css in your design manager, and template_fwds_styles--mobile.min.css in the browser.

This might be related to the design manager, the design manager (to my limited knowledge here) automatically compiles and minifies the css files for your web page after publishing changes, I am unsure if the template is auto generated with the minfied file name using "template_" as a possible asset link or not during this step, but it may be something to look into.

You can find more details on the minification process here

Hope this helps!

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.

[MuhammadAmjad]

Hi @Jopitts,

CSS caching issues in HubSpot's Design Manager can be frustrating! Here's what usually works:

Troubleshooting Steps:
1. Clear HubSpot's cache: Try appending ?hs_preview=true to your page URL
2. Hard refresh: Use Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows) in your browser
3. Check the file path: Ensure the CSS file being referenced matches exactly what's in your template
4. Verify publish status: Sometimes the file shows in Design Manager but isn't fully published
5. Check for CSS syntax errors: A single error can prevent the entire stylesheet from loading

If you're seeing template_fwds_styles--mobile.min.css being used instead of your intended file, there might be a template inheritance or caching issue at the HubSpot CDN level.

I specialize in HubSpot CMS troubleshooting and can help you resolve this quickly if you're still stuck.

Cheers,
Amjad Iqbal
HubSpot Certified Specialist

[BérangèreL]

Hi @Jopitts, just checking in to see if you still need a hand with this!

If so, feel free to share a few more details or screenshots (just be sure to keep any sensitive information private), and our Community will be even better equipped to help out.
 

Thanks so much, and wishing you a wonderful day!
Bérangère

[Christensen · Accepted solution]

Hey @Jopitts, maybe it has to do with the path? Have you tried selecting the CSS file in the design manager and clicking the "Copy path" or "Copy public URL"?

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.

[alee303 · Accepted solution]

Hey Jopitts!

Have you tried clearing the cache? this might be related to browser caching or server-side cache.
I did some research prior and found another discussion that may be similar to your issue here

Hope this helps!

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.

[Jopitts]

@alee303 , nope - it's not to do with caching.  I had to find the relevant part of the theme itself to modify, rather than the readily editable CSS.  It seems very messed up to me though!

[alee303 · Accepted solution]

Hey @Jopitts ! 

If possible are there any screenshots, error messages, or further details you can provide? is this a custom theme you're working with? and have you tried a hard refresh on the page? 

If the concern is why the file is called fwds_styles--mobile.css in your design manager, and template_fwds_styles--mobile.min.css in the browser.

This might be related to the design manager, the design manager (to my limited knowledge here) automatically compiles and minifies the css files for your web page after publishing changes, I am unsure if the template is auto generated with the minfied file name using "template_" as a possible asset link or not during this step, but it may be something to look into.

You can find more details on the minification process here

Hope this helps!

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.