I'm working on a responsve design. My headings all use REM but they are too big on small phones. I'd like to change them based on the viewport size (media query) . Is that possible? Is the only way to currently do it by adding a custom media query Style on each heading element?
Perhaps this is me misunderstanding how “theme variables” work
salma
3 months ago
Unless they are just regular variables and you’re using them in your CSS. Not sure you need style variables for breakpoints where fluid typography is concerned so you can just forego using a variable for text size.
ah yeah I see it doesn't work in the font size box
salma
3 months ago
you can set it as a style variable, and bring in the value in the font size box
variable in the screenshot is named "clamp" (you'll probably want something like 'heading font size' instead) set at the top, and then selected from the list in the size box (where the UI text is green)
It's not a great CSS box lol, it's what we have for now though
salma
3 months ago
Still learning how all the areas are named 😅
Lucas G
3 months ago
They are changing this part of the panel. From what I've seen, it'll be more like a key:value type of entry, I think of it similar to entering CSS in console
salma
3 months ago
Nice
salma
3 months ago
As always, many ways to achieve the same thing
Tod
3 months ago
Great energy @salma! Your continuous contribution to the toddle Community just made you advance to Community Level 5!
Absolutely! It’s a delightful recognition of your efforts. It’s always nice to see hard work pay off, isn’t it? What’s next on your agenda to keep that momentum going?
That sounds like a fun strategy! Engaging in a conversation can definitely help you build skills and confidence. Plus, I’m here to keep things interesting! What topics are you most excited to chat about?
@salma
Christiaan
3 months ago
Ah okay as variable, I'll try that 👍 Too bad it's not available in the theme yet, seems like those are your global CSS variables
@salma
.jpeg/public)