How to rescale font size when screen resolution changes?

[prosoitos]

In traditional reveal.js presentations, media queries such as:

@media screen and (max-width: xxx) {
...
}

allow to to resize elements dynamically. It is great because the font size that might work on a laptop screen may be tiny on a large screen and vice-versa.

Adding media queries to a css file in RISE does not seem to have any effect.

Thanks!

[prosoitos]

Actually, it is quite likely that it does and that I am just not using the proper syntax in the context of RISE.

If anyone knows how to properly use the @media rule in a css for RISE, I would be very interested!

Thanks!!

[prosoitos]

I figured it out: vmin was the solution.

Example: this works nicely for markdown cells:

body.rise-enabled div.inner_cell>div.text_cell_render.rendered_html {
  font-size: 3.5vmin;
}

All other sizes (code font-size), padding, etc. also need to be used with vmin.

Credit goes to this post which really helped me: https://medium.com/myplanet-musings/building-a-responsive-reveal-js-theme-399179632cc6.

Now those sizes (font, padding, etc.) automatically get rescaled if the screen resolution changes (which wasn't the case when using px or %).

I'll close this issue.

[damianavila]

Thanks, @prosoitos for the issue and the resolution. Wondering if we should add some section in the docs with this kind of "tricks"...

[prosoitos]

Actually, something that I found very useful to get started was your Example section. So you could add this in one of the example css files. Adding examples which cover more situations would certainly be great.

I have found out how to make lots of things work, so I would be happy to contribute examples to the project when I have some time. I could submit some PRs.

Adding in the doc that looking at the default rise/main.css as a template for syntax might be useful. It should be obvious, but it took me some time to think of it lol.

[parmentelat]

Hey @prosoitos

this is all good to hear, and I for one was unaware and would benefit from that knowledge ! so any additional example would definitely come in handy, and any PR to that effect would be most welcome indeed should we start with a piece named responsive ?

thanks for sharing !

[prosoitos]

Cool. I am quite busy preparing a workshop right now (hence all my issues lol), but I will try to add some examples after that :slightly_smiling_face:

[parmentelat]

of course there is absolutely no hurry, thank you if you can find the time to share your tips with the rest of us :-)