bulma - adjusting typography sizing efficiently
Asked Answered
F

1

7

I'm having a hard time figuring out the most efficient way to resize text for mobile. I know per the documentation, making the text size responsive to the screen is fairly straightforward, simply add the is-size-*-mobile class to an element to reset the text size to the value of * (1-7) for mobile devices. What elements are the best place to do this? For example, I would like to be able to have all the text on screen change to size 7 on mobile, but so far I've had to add the is-size-7-mobile class to almost every text container on the page. While it's not impossible to do, it seems to be defeating the purpose of having such a class available through CSS.

Any tips would be greatly appreciated.

Fabrin answered 11/2, 2019 at 3:37 Comment(0)
M
0

Although they lack a specific example, those Typography helpers are meant to be added to the element that holds the content you want to modify.

For example, if you want to modify the whole document consider adding it right to the body element:

<body class="is-size-7-mobile layout-documentation page-helpers">

The above example works on their documentation page you liked in your question. Just hit F12, add the modifier, and voilà, all the page changes text size.

Maroc answered 7/9, 2021 at 5:43 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.