Sass media-queries , heading problems

Hi all.
So I have some code, that some online SCSS compiler complains about:

h3{
	margin: 12px 0;
    font: 700 $font-size-sm 'Fraunces', serif;
	@media only screen and (min-width: $breakpoint-large-phone) and (max-width: $breakpoint-desktop){
		font:700 $font-size-med 'Fraunces', serif;
	}
	@media only screen and (min-width: $breakpoint-desktop){
		font: 700 $font-size-lrg 'Fraunces', serif;
	}	
}

it says that “Heading (h3) has already been define”.
How am I supposed to solve this? If I separate the media-queries, I will also need three h3{...} selectors.
So I’m unsure how to solve this?

Thank!

Hi there, would you mind posting your code link?

off course:

https://codepen.io/cynthiab72/pen/abKamYV

I’ve been running your code and trying to find the error but nothing is triggered. This is what I get. Maybe I am not looking for the right error.


Let me know if that helps.

Thank you , but it’s not really an error, more a warning message from a SCSS.compiler ? :slight_smile:

Here’s a link to the compiler I’m using:

https://beautifytools.com/scss-compiler.php

it flags the h3 section with the warning:
“Heading (h3) has already been defined”.

Thanks

from what I read online it has to do with this rule:
https://github.com/CSSLint/csslint/wiki/Headings-should-only-be-defined-once

But I can’t find any clue online how to do solve this with heading that should adapt to media queries?

If I nest the media queries in h3, it’s no good, the same if I use separate media queries each with a h3.
How should I update a h3 (or any heading) with media queries in SCSS?

Thanks

I solved it , just by using a classname instead of the h3 selector.
SCSS seems picky like that or CSSLint at least.

Now I’m wondering about uploading files to Github.
I’m using several different files for variables, mixins and my main SCSS file. The SCSS file imports the variables and mixins files, but when I look at the ‘live page’ , it doesn’t even show up with any formatting?