Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

📌 Forget breakpoints! Use CSS clamp to size your text based on the viewport width. Sandbox + details below 👇

andrej

62,686 subscribers

211,122 views • 3 years ago •via X (Twitter)

Arts Science & Technology Education

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. 🎉

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 • 5 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!

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

193,045 views • 4 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. 👇

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

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

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👑

32,000 views • 3 months 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 👇

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 👇👨‍💻

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

MiniMax H3 Anime Daily Routine Updated the old prompt. You can find the prompt in the replies. Reference character has glasses so I added a few details. Don't forget to update the prompt based on your character.

MiniMax H3 Anime Daily Routine Updated the old prompt. You can find the prompt in the replies. Reference character has glasses so I added a few details. Don't forget to update the prompt based on your character.

Kōda

41,269 views • 1 month 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! 👇

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,624 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. 🔗

✍️ 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 • 4 months ago

𝐊𝐚𝐫𝐦𝐚𝐂𝐚𝐫𝐝𝐬 𝐅𝐫𝐞𝐞 𝐌𝐢𝐧𝐭 𝐈𝐬 𝐋𝐈𝐕𝐄! 🔥 💳 4 Tiers. 1️⃣ 1 mint per wallet address. ⏰ 72 Hours. 💵 Your tier will be assigned based on your $KARMA balance at a snapshot taken shortly before the reveal on Monday Alpha. Access. KarmaCards. Mint details below 👇

𝐊𝐚𝐫𝐦𝐚𝐂𝐚𝐫𝐝𝐬 𝐅𝐫𝐞𝐞 𝐌𝐢𝐧𝐭 𝐈𝐬 𝐋𝐈𝐕𝐄! 🔥 💳 4 Tiers. 1️⃣ 1 mint per wallet address. ⏰ 72 Hours. 💵 Your tier will be assigned based on your $KARMA balance at a snapshot taken shortly before the reveal on Monday Alpha. Access. KarmaCards. Mint details below 👇

KARMACOIN ✨

118,336 views • 2 years ago

Use geodes falloff on the whole character instead of going purely flat. #camkeys even passes viewport data to the GN so you don’t even need to use a camera.

Use geodes falloff on the whole character instead of going purely flat. #camkeys even passes viewport data to the GN so you don’t even need to use a camera.

Beyond Dev - Tyler Walker

98,876 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.

Harvard Business Review

10,470 views • 2 months 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.

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

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

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,198 views • 2 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! 👇

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,620 views • 3 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 👇

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,801 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 👇

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,348 views • 3 years ago