I have a Carrd website where I'm using several fonts that aren't on the site by default, so I've been using Embeds for all text. Right now I'm trying to add @media queries to the head to adjust font sizes according to screen size, but I can't for the life of me get it to work. No matter what I change, it completely ignores the @media query and just uses the default settings.
Here's the relevant part of the code:
.titletext {
font-family: Vipnagorgialla;
font-size: 6vw;
text-transform: uppercase;
}
@media screen and (max_width: 600px) {
.titletext {
font-family: Vipnagorgialla;
font-size: 10vw;
text-transform: uppercase;
}
}
I have the viewport tag in my head already. I've tried putting both sizes inside @media queries (in that case, it loses the font entirely). I've tried getting rid of screen and. I've tried adding only before screen. I've tried only putting the font size inside the @media query. I've tried changing the classes to ids. I feel like I'm losing my mind. Is this a Carrd thing? What am I missing?
It should be max-width, not max_width. See also: Using media queries.
The technique itself does work, I've tested it.