I'm wondering why bother with the media query? just define your h1, h2 etc using font-size: clamp(min, Xvw, max); for each sure put the exception in place for non-clamp browsers. oh if you forgot : you must switch off global font size for headings - manage / settings / global styles / headings .. make sure no font size is displayed - your custom stylesheet should over-ride now.
I think they didn't show that method because it's not natively supported in Oxygen at the time of making this video. The upcoming release (3.6) does support clamp() though!
Worth keeping in mind that clamp is NOT a good idea if factoring accessibility into your build (which you should be). A strict maximum font size will cause issues with user zoom settings, and may have unintended consequences of preventing a user from zooming as much as they need to for accessibility purposes
Would you use the real value 9.375vw for h1 on a real site design? Why not 9.5vw ? Will it make much difference with all the strange small device sizes out there?
I think: you must switch off global font size for headings - manage / settings / global styles / headings .. make sure no font size is displayed - your custom stylesheet should over-ride now. Good Luck!
Not working here either. No font size value in the global settings. It does indeed work when I use it with a custom class but not for the heading elements.
I don't think this can be called responsive text. This is the text that runs over and decreases to certain values. I found a way to make the perfect responsive text (though when there are more media queries), however, as you see in the layout, the text is in this position (without changing the number of lines and characters in a row, that is, completely exactly the same as, for example, in 320 px as well and at 414 pixels) only the scale of the letters changes, want to tell you how it works? For me personally, this option is not suitable me, I do not want to run over lines as this violates the layout and at certain resolutions, the button will go down a lot
![Warhammer 40k: Space Marine 2 | เพื่อจักรพรรดิ ! [ตอนเดียวจบ]](http://i.ytimg.com/vi/4M0ckYMA4-U/mqdefault.jpg)
![POLYCAT - ข้อความรูปยิ้ม :) [Music Video]](http://i.ytimg.com/vi/lBhIgPGCgbI/mqdefault.jpg)
Size in pixels / Viewport width == vw
Thus, 105px / 1120 = 9.375vw.
I find that easier than pulling up a calculator.
Awesome! That's super helpful, thank you for sharing.
I wish the Oxygen's general settings for fonts would allow break points as well
Yep.
But you may use plugin. For example, "Custom CSS and JS".
Now just pair this with Variable Fonts and we're golden. This and VF should be implemented in Oxygen
fantastic way to make heading resize automatically. Thank you for sharing.
I'm wondering why bother with the media query? just define your h1, h2 etc using font-size: clamp(min, Xvw, max); for each sure put the exception in place for non-clamp browsers.
oh if you forgot : you must switch off global font size for headings - manage / settings / global styles / headings .. make sure no font size is displayed - your custom stylesheet should over-ride now.
I think they didn't show that method because it's not natively supported in Oxygen at the time of making this video. The upcoming release (3.6) does support clamp() though!
Worth keeping in mind that clamp is NOT a good idea if factoring accessibility into your build (which you should be). A strict maximum font size will cause issues with user zoom settings, and may have unintended consequences of preventing a user from zooming as much as they need to for accessibility purposes
What if we use Rem instead of pixels?
This is good except for when you go landscape on mobile phones. Then the heading sizes get super distorted. Not the ultimate solution, but good start.
Nice video, thanks !
Why aren't you guys using rem for font size in your tutorials?
Make a video on System Font.
Heard it reduces load time and optimized for all types of devices.
It doesn't really require a tutorial. Just use web safe system fonts instead of loading Google fonts. www.w3schools.com/cssref/css_Websafe_fonts.asp
Would you use the real value 9.375vw for h1 on a real site design? Why not 9.5vw ? Will it make much difference with all the strange small device sizes out there?
agency base 4tw
Hey wt abt the color picker update for wp5.5
What about googling "5.5" "color picker" - About 544,000 results (0.65 seconds)
hi, what tool was that for testing the responsiveness of the site at 0:57 ?
its just chrome inspect - choose responsive rather than a specific device
S you have to implement it with css? You cannot just paste the clamp fomular into the font size? Big L
Can't get it to work. No idea why.
I think: you must switch off global font size for headings - manage / settings / global styles / headings .. make sure no font size is displayed - your custom stylesheet should over-ride now. Good Luck!
Not working here either. No font size value in the global settings.
It does indeed work when I use it with a custom class but not for the heading elements.
Oh never mind. The headings had additional classes attached to them that needed to be removed.
How does this play out for browsers that don't support modern CSS?
You can check browser support for clamp(), min(), and max() at caniuse.com/css-math-functions.
I don't think this can be called responsive text. This is the text that runs over and decreases to certain values. I found a way to make the perfect responsive text (though when there are more media queries), however, as you see in the layout, the text is in this position (without changing the number of lines and characters in a row, that is, completely exactly the same as, for example, in 320 px as well and at 414 pixels) only the scale of the letters changes, want to tell you how it works? For me personally, this option is not suitable me, I do not want to run over lines as this violates the layout and at certain resolutions, the button will go down a lot
переведите видео на русский ??!