Blog CSS text-transform keeps reverting to uppercase

hjender · ‎May 17, 2018

On our blog, our h1 should be "text-transform:none" in our Production.css file, to give it headline-style capitalization.

However, it keeps changing itself to "text-transform:uppercase" for no reason. When I change it back to "none," it'll do that for a while, but then it reverts itself to all-caps again.

Why is it doing this? How do I fix it permanently?

Jsum · ‎May 18, 2018

@hjender,

Hey please read this and let me know if you do not understand, because you have a pretty major issue on your page that needs to be fixed and will most likely solve all of your issues:

The <head> of your html document is in the document twice! this means that all of your meta tags are doubled, with different values, all of your stylesheet links are double (this includes production.css which is being fed from 2 different sources), and anything else existing in the head is doubled. You NEED to fix this before trouble shooting the symptoms this is causing. If you need help you can PM me. I know how this happens.

View solution in original post

roisinkirby · ‎May 18, 2018

Hey @hjender thanks for sharing a link to the page! @ndwilliams3, @benvanlooy, @dessery would you be able to lend your help / expertise here?

MFrankJohnson · ‎May 18, 2018

Not trying to add to the problem here, but wouldn't it be cleaner / simpler if written as ...

<h1 class="hard--top">River Pools & Spas</h1>

... and completely remove that pseudo-hidden h1 (in red) with the 'font-size: 0:!important' which can't be good for SEO?

Just because an h1's font size is set to zero doesn't mean it's no longer an h1! (see image)

Just curious.

Going back to my cave now. haha

Note: The date of each post here is increasingly important as HubSpot evolves to be the #1 CRM platform of choice world-wide.

-- Visit

Hope that helps.

Be well,
Frank

HubSpot's Hiring World-Wide!

benvanlooy · ‎May 18, 2018

If you don't need capitals just remove the following line, no? 🙂

text-transform: uppercase;

Is it possible you have the CSS file in the editor open in several tabs? Or that someone else has it open?

That could cause you changing the CSS in one tab, and saving later in another tab, thereby overwriting the previous change?

Jsum · ‎May 18, 2018

@hjender,

First of all, Why is the title set to 'text-transformation: uppercase;' to begin with? are you re-styling a purchased template? phuchased templates have several layers of css, alot of it redundant. I always create an "overwrite.css" stylesheet to rewrite styles and ensure that it is placed last on the stylesheet list so that it takes effect.

second on this subject, if you want to use title case then you should set it text-transform to capitalize, not none. see here.

as for the reversion issue, I have had similar issues related to caching in Hubspot. I make one change, check it, the changed went through so I make another and the stylesheet reverts back to before the first change. Is this what you are experience? if so the solutions for me are to wait it out (a couple of hours per change), add a version query to css url in the page html (only works in coded files), or add a query to the url to clear the cache, like www.website.com?no-cache=true.

hjender · ‎May 21, 2018

1. Yes, the template was originally created by a third party. We will be cleaning it up eventually, but other company business has priority right now.

2. I tried text-transform: none, text-transform: capitalize, and taking away text-transform altogether. In all variations, it reappeared as text-transform: uppercase.

3. Waiting it out has proven ineffective; the reversion usually happens within an hour. I've also tried www.riverpoolsandspas.com?no-cache=true with no apparent change.

4. I'm not sure what you mean by having the <head> duplicated -- our <head> and <header> are two different things. Can you reply or PM to clarify?

Jsum · ‎May 21, 2018

You should be cleaning it up first and foremost. Having 2 head sections in your document is the most obvious cause of your issues. Trouble shooting beyond that without first fixing your document would not make sense.

Jsum · ‎May 18, 2018

@hjender,

Hey please read this and let me know if you do not understand, because you have a pretty major issue on your page that needs to be fixed and will most likely solve all of your issues:

The <head> of your html document is in the document twice! this means that all of your meta tags are doubled, with different values, all of your stylesheet links are double (this includes production.css which is being fed from 2 different sources), and anything else existing in the head is doubled. You NEED to fix this before trouble shooting the symptoms this is causing. If you need help you can PM me. I know how this happens.

View solution in original post