Hi everybody. I’m new here, which is testament to this community – you answered most of my questions already, so I was busy lurking.
Well… here’s one thing: How can I tell Blocs to use a different root font size?
It seems that Blocs has 16px hard-coded in its layout and preview; I tried overriding with both html and :root selectors, but to no avail. Browser preview works fine, though, so the code is legit.
Any help greatly appreciated. I have more questions regarding fonts, but this is the most pressing issue right now. Thanks.
I think you can add a new css rule applied to the html element. Speak in blocs on the bottom right hand there’s a option to open the css rules and there add a new rule for html element
You can find that window as well in Window > Class Library Manager
That should do it I think, not double checked as I’m on mobile but as far i recall this is how you’d add any sort of custom classes and also customize existing classes
The class editor doesn’t allow tags at present. It will add a .
infront of the html tag.
Adding some CSS to the page header won’t show until preview.
You can drop a Code Widget into your project, and make sure preview is selected on the right panel. Then adding some CSS like - will mean you see it on the design canvas.
<style>
html {
font-size: XXpx;
}
</style>
I am not so sure it matters, but I would be more inclined to use custom classes. You can also set font sizes, under Project Settings, and also by Breakpoints.
2 Likes
Ah, Code Widget works. Thanks so much.
A little background: I’m using rem throughout my design, so custom classes wouldn’t cut it. I’m on a 12/24px grid, and 16px means lots of fractions, which are getting hard to read, remember and recalculate.
The Project Settings don’t set the :root class, do they? (though that would be cool, I guess)
Yeah, I use rem and em throughout too.
No, the project settings font size basically just gets added to the CSS with the regular font-size.