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?
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?
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?