Hi -
I ran my store through a W3C CSS Validation (level 3) on jigsaw (jigsaw.w3.org/css-validator ) and received a ton of errors. A lot of them look like this:
| 0 | .h1, h1 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 0 | .h1, h1 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 0 | .h2, h2 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 0 | .h2, h2 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 0 | p | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 0 | .site-header__icons .btn--link, .site-header__icons .site-header__cart | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 1113 | blockquote | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 1187 | h3, .h3 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 1192 | h3, .h3 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 1197 | h4, .h4 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 1202 | h4, .h4 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 1207 | h5, .h5 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 1212 | h5, .h5 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 1217 | h6, .h6 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
| 1222 | h6, .h6 | Value Error : font-size Parse Error (var(--font-size-base))) * 1em) |
This is what my code looks like in theme.css:
h3, .h3 {
font-size: calc(((var(--font-size-header)) / (var(--font-size-base))) * 1em);
text-transform: none;
letter-spacing: 0; }
@media only screen and (max-width: 749px) {
h3, .h3 {
font-size: calc(((var(--font-h3-mobile)) / (var(--font-size-base))) * 1em); } }
I asked chatgpt (don't laugh lol) to see if it could explain to me what the error exactly is, since I don't know much about this topic, and chatgpt said I have an extra set of parenthesis and should delete one. However, I know that chatgpt may be wrong, so I wanted to ask actual professionals to see what you think. However, if that is truly the reason, it's an easy fix.
Am I correct in running the validation test for the level 3 CSS? Or should it have been level 2.1 or level 2?
Some recent changes I made in case this is contributing to the cause:
- I changed the font-size on my main theme front-end settings because, for some reason, on mobile, It was 15px and looked so small. I changed it to 17 from 16 so it would be 16 on mobile (since mobile is font-size -1).
- I added some custom CSS font-size on my stylesheet.css for my headings with !important, should I not have put it in the stylesheets.css? The folder was empty because it had an old font-family in there that I recently changed. I know I should have changed it in my theme.css, however, I'm new to this & teaching myself how to do this because it's fun for me, and I wanted to make sure it worked this way before I tried messing with theme.css. For example, this is some of the code I added in stylesheets.css:
.h2, h2 {
text-transform: none !important;
font-size: 22px
}
.h1, h1 {
font-size: 31px !important;
}
.h3, h3 {
font-size: 20px;
margin-bottom: 10px !important;
- I recently changed the font-family for h2, h3 to roboto and helvetica.
- I also added some custom CSS code in the front-end to my home page, product page, and blog pages.
Let me know your thoughts and if you need any additional information from me. Thanks in advance for the help!
My store is: theantiagingpro(dot)com
