Menu
I have problem with font size in materialize. if my client device become smaller text sizes is not responsive and they are so small. one solution is to use @media query for every client devies. this is not my solution because materialize itself has media queries and I don't want rewrite them again. is there any way to make texts responsive in materialize? thanks
296
asked Sep 12 '25 01:09
Perhaps font-size:5vw where 5 would be 5% of the viewport. Or each unit of vw is 1% of the viewport width
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div style="font-size:5vw;text-align:center;">This is Some Responsive Text</div>
</body>
</html>
Thanks John!
I created this add-on for facilitating font-size using materialize:
/* fontSize: */
.xs {font-size: 0.75rem}
.sm {font-size: 0.875rem}
.base {font-size: 1rem}
.lg {font-size: 1.125rem}
.xl {font-size: 1.25rem}
.2xl {font-size: 1.5rem}
.3xl {font-size: 1.875rem}
.4xl {font-size: 2.25rem}
.5xl {font-size: 3rem}
.6xl {font-size: 4rem}
.fs1 {font-size: 1vw}
.fs2 {font-size: 1.4vw}
.fs3 {font-size: 1.6vw}
.fs4 {font-size: 1.8vw}
.fs5 {font-size: 2vw}
.fs6 {font-size: 2.2vw}
.fs7 {font-size: 2.4vw}
.fs8 {font-size: 2.6vw}
The unique problem of % font-size is that is too variable text size from mobile (too small) to large-screens (too big)
27
answered Sep 14 '25 15:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With