Loading video...

Video Failed to Load

Go Home

๐Ÿ“Œ Forget breakpoints! Use CSS clamp to size your text based on the viewport width. Sandbox + details below ๐Ÿ‘‡

reactive_dude's profile picture

andrej

62,840 subscribers

211,109 views โ€ข 3 years ago โ€ขvia X (Twitter)

ArtsScience & TechnologyEducation
LIVE

Anya Rossiโ€ข Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. ๐ŸŽ‰
0:15

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. ๐ŸŽ‰

Devon Govett

48,276 views โ€ข 3 months ago

One line of CSS. Perfectly responsive typography on every screen. font-size: clamp(1rem, 1vw, 1.75rem); ๐Ÿช„ 1rem minimum keeps text readable on phones ๐Ÿช„ 1vw makes it scale fluidly with the viewport ๐Ÿช„ 1.75rem caps it elegantly on large displays No media queries or breakpoints. Try it!
0:11

One line of CSS. Perfectly responsive typography on every screen. font-size: clamp(1rem, 1vw, 1.75rem); ๐Ÿช„ 1rem minimum keeps text readable on phones ๐Ÿช„ 1vw makes it scale fluidly with the viewport ๐Ÿช„ 1.75rem caps it elegantly on large displays No media queries or breakpoints. Try it!

Kyrylo Silin

192,315 views โ€ข 2 months ago

Introducing Customizable Responsive Breakpoints for Divi 5. ๐Ÿฅณ Divi 5 now comes with seven pre-defined breakpoints that cover every type of device, and you can customize the width of each breakpoint to control your design at every size. ๐Ÿ‘‡
0:20

Introducing Customizable Responsive Breakpoints for Divi 5. ๐Ÿฅณ Divi 5 now comes with seven pre-defined breakpoints that cover every type of device, and you can customize the width of each breakpoint to control your design at every size. ๐Ÿ‘‡

Elegant Themes

3,655,486 views โ€ข 1 year ago

A ๐Ÿ”ฅ browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount๐Ÿ‘‡
0:12

A ๐Ÿ”ฅ browser extension every CSS developer must have. CSS Scan lets you extract the code for any CSS element of all the websites across the internet. Check out CSS Scan and click on the below link to get a 25% discount๐Ÿ‘‡

Shefali

29,340 views โ€ข 1 year ago

How i build with Claude๐Ÿ‘‡ 1. CSS blend-mode = text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save this
0:16

How i build with Claude๐Ÿ‘‡ 1. CSS blend-mode = text over photography in one line 2. GSAP ScrollTrigger = hero pins while content scrolls over it 3. Splitting.js = title arrives letter by letter on load 4. video autoplay muted = forest feels alive without user interaction 5. CSS clamp() = typography scales mobile to desktop zero media queries 6. linear-gradient overlay = text readable at any screen brightness Save this

FHILY๐Ÿ‘‘

31,844 views โ€ข 1 month ago

love the new ebay playbook docs ๐Ÿ‘ always good to see fluid typography scaling in the wild details on how you can do it with CSS ๐Ÿ‘‡
0:16

love the new ebay playbook docs ๐Ÿ‘ always good to see fluid typography scaling in the wild details on how you can do it with CSS ๐Ÿ‘‡

jhey ส•โ€ขแดฅโ€ขส”

98,083 views โ€ข 1 year ago

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects ๐Ÿ‘‡๐Ÿ‘จโ€๐Ÿ’ป
0:12

An awesome CSS trick is to use :hover on the container and :not(:hover) on the items that are not currently hovered to make more advanced effects ๐Ÿ‘‡๐Ÿ‘จโ€๐Ÿ’ป

David Mrรกz

16,879 views โ€ข 1 year ago

CSS Tip! โœจ Did you know you can animate CSS Grid tracks? ๐Ÿ‘€ ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! ๐Ÿ˜Ž CodePen.IO link below! ๐Ÿ‘‡
0:18

CSS Tip! โœจ Did you know you can animate CSS Grid tracks? ๐Ÿ‘€ ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! ๐Ÿ˜Ž CodePen.IO link below! ๐Ÿ‘‡

jhey ส•โ€ขแดฅโ€ขส”

30,617 views โ€ข 3 years ago

โœ๏ธ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. ๐Ÿ”—
0:17

โœ๏ธ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. ๐Ÿ”—

Ahmad Shadeed

29,912 views โ€ข 2 months ago

Read with ease in the HBR mobile app using our new Article Text Size Selector, which gives you control over text size for a more comfortable, personalized reading experience. Go to Profile > Display Settings to adjust your preferred text size. Try it now.
0:15

Read with ease in the HBR mobile app using our new Article Text Size Selector, which gives you control over text size for a more comfortable, personalized reading experience. Go to Profile > Display Settings to adjust your preferred text size. Try it now.

Harvard Business Review

10,470 views โ€ข 16 days ago

Want some more sunshine to finish your weekend? You might be in luck๐Ÿคž Find out the details of the #4cast below๐Ÿ‘‡
0:11

Want some more sunshine to finish your weekend? You might be in luck๐Ÿคž Find out the details of the #4cast below๐Ÿ‘‡

Met Office

21,615 views โ€ข 8 months ago

Introducing Windfall - the 1st "Gaming based LST" built on Solana! Turbocharge your SOL holdings through gamified prize pools. Join the waitlist below๐Ÿ‘‡ (1/6)
0:15

Introducing Windfall - the 1st "Gaming based LST" built on Solana! Turbocharge your SOL holdings through gamified prize pools. Join the waitlist below๐Ÿ‘‡ (1/6)

Windfall

166,031 views โ€ข 1 year ago

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.
0:16

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! I wrote a new article where I continue exploring the experimental implementations of the latest specs.

Roma Komarov (inactive)

138,374 views โ€ข 3 years ago

CSS Tip! โšก๏ธ You could use CSS trig functions to calculate animation-delay ๐Ÿค“ Using them here with custom props for this DNA strand! ๐Ÿ‘ฉโ€๐Ÿ”ฌ .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) ๐Ÿ‘ˆ * var(--speed) * -1s ); } CodePen.IO link below! ๐Ÿ‘‡
0:14

CSS Tip! โšก๏ธ You could use CSS trig functions to calculate animation-delay ๐Ÿค“ Using them here with custom props for this DNA strand! ๐Ÿ‘ฉโ€๐Ÿ”ฌ .node { animation-delay: calc( sin((var(--index) / var(--total)) * 45deg) ๐Ÿ‘ˆ * var(--speed) * -1s ); } CodePen.IO link below! ๐Ÿ‘‡

jhey ส•โ€ขแดฅโ€ขส”

182,569 views โ€ข 3 years ago

ask higgsfield to handle your marketing and get stunning visuals for your brand in just minutes. all the details on how I made this video using nano banana + higgs ads, below ๐Ÿงต๐Ÿ‘‡
0:15

ask higgsfield to handle your marketing and get stunning visuals for your brand in just minutes. all the details on how I made this video using nano banana + higgs ads, below ๐Ÿงต๐Ÿ‘‡

TechHalla

41,587 views โ€ข 10 months ago

Jordan 1 Low โ€œBlack Toeโ€ Men's Sizes 8-14 ($140) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the answer to the question written Show us your size tag or sticker (Example Shown) Post it below ๐Ÿ‘‡
0:10

Jordan 1 Low โ€œBlack Toeโ€ Men's Sizes 8-14 ($140) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the answer to the question written Show us your size tag or sticker (Example Shown) Post it below ๐Ÿ‘‡

better+

27,320 views โ€ข 2 years ago

Jordan 4 โ€œThunderโ€ Men's Sizes 9-14 ($210) (No 9.5) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the answer to the question written Show us your size tag or sticker (Example Shown) Post it below ๐Ÿ‘‡
0:16

Jordan 4 โ€œThunderโ€ Men's Sizes 9-14 ($210) (No 9.5) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the answer to the question written Show us your size tag or sticker (Example Shown) Post it below ๐Ÿ‘‡

better+

49,794 views โ€ข 3 years ago

Jordan 4 โ€œRed Cementโ€ Men's Sizes 8-14 ($210) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the ANSWER to the question written Show us your size tag or sticker (Example Shown) Post it below ๐Ÿ‘‡
0:14

Jordan 4 โ€œRed Cementโ€ Men's Sizes 8-14 ($210) Post a VIDEO of a shoe YOUR size Somewhere PHYSICALLY in the video have your MENS shoe size and the ANSWER to the question written Show us your size tag or sticker (Example Shown) Post it below ๐Ÿ‘‡

better+

40,346 views โ€ข 2 years ago

I made the Apple iOS and macOS Liquid Glass effect using CSS and SVG filters and it's available on GitHub #WWDC25 Link below ๐Ÿ‘‡
0:14

I made the Apple iOS and macOS Liquid Glass effect using CSS and SVG filters and it's available on GitHub #WWDC25 Link below ๐Ÿ‘‡

Luke

289,151 views โ€ข 1 year ago