revealJS slides size in web browser - layout

[antoine4ucsd]

Description

Hello
I created a slide deck with revealJS
I have problems with the width/height and how the slides appear in the web browser. it varies between screens, computers and also using the same screen when resizing the browser tab.
for example, below the slide is off and half of the second plot is cutt

I used

#| fig-height: 3.6
#| fig-width: 10
plt1

#| fig-height: 3.6
#| fig-width: 10
plt2

but if I resize my browser (half of my screen width), it will look nice

in yaml, I have this

format:
  unhcr-revealjs:
    view-distance: 15
    width: 1280
    height: 720
    footer: "As of 2025, week 9"
    slide-number: true
    slide-layout: auto-stretch
    show-slide-number: print
    pdf-separate-fragments: true
    embed-resources: true

any ways to make sure the content always shows up regardless of screen or brower width? and consistent across all slides?
THANK YOU!

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? The goal is to make it as easy as possible for us to recreate your problem so that we can fix it: please help us help you! Thanks.

You might want to opt-out of auto-stretch.

---

You can share a self-contained "working" (reproducible) Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).
See https://quarto.org/bug-reports.html#small-is-beautiful-aim-for-a-single-document-with-10-lines.

If you have multiple files (and if it is absolutely required to have multiple files), please share as a Git repository.

R	Python
````qmd --- title: "Reproducible Quarto Document" format: html engine: knitr --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{r} x <- c(1, 2, 3, 4, 5) y <- c(1, 4, 9, 16, 25) plot(x, y) ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````	````qmd --- title: "Reproducible Quarto Document" format: html engine: jupyter --- This is a reproducible Quarto document. {{< lipsum 1 >}} ```{python} import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.show() ``` {#fig-placeholder} {{< lipsum 1 >}} The end after @fig-placeholder. ````

Additionally and if not already given, please share the output of quarto check within a code block (i.e., using three backticks ```txt), see https://quarto.org/bug-reports.html#check.

[mcanouil]

Note that your issue is all about your slide layout which is HTML, CSS, and JavaScript (Reveal.js).

You can start investigating your HTML document using your favourite browser and its inspect/developer mode to understand what is happening, live tweak, etc. to figure out a CSS rule or more advanced tweak to get the desired output.

[antoine4ucsd]

reproducible example below

---
title: XXX
format:
  unhcr-revealjs:
    width: 1280
    height: 720
    slide-number: true
    slide-layout: auto-stretch
    show-slide-number: print
    pdf-separate-fragments: true
    embed-resources: true
    

    
editor: visual
---


## design

::: panel-tabset

### 2025
:::: columns
::: {.column width="80%"}

#### plots

```{r}
#| fig-height: 3.6
#| fig-width: 10
library(ggplot2)
pl1<- ggplot(mtcars, aes(x = wt, y = mpg)) +
  geom_point(color = "blue", size = 3) +
  geom_smooth(method = "lm", color = "red", se = FALSE) +
  labs(
    title = "Relationship between Weight and MPG",
    x = "Weight (1000 lbs)",
    y = "Miles per Gallon"
  ) +
  theme_minimal()
pl1
```


```{r}
#| fig-height: 3.6
#| fig-width: 10

pl1

```

:::

::: {.column width="20%"}

#### text

<br><br><br><br><br><br>

some text
::: 

::::



### 2024

```{r}
#| fig-height: 3.6
#| fig-width: 10
pl1
```

```{r}
#| fig-height: 3.6
#| fig-width: 10
pl1
```




:::

if I use my browser on only 50% of my screen width it looks like below

but if I use in full width, it does not resize.

[mcanouil]

This is not reproducible as you are clearly using a custom format for which you did not provide any source.

[antoine4ucsd]

I am attaching my css
revealjs.scss.txt

[antoine4ucsd]

I reran with specific css. same issue

---
title: XXX
format:
  revealjs:
    width: 1280
    height: 720
    slide-number: true
    slide-layout: auto-stretch
    show-slide-number: print
    pdf-separate-fragments: true
    embed-resources: true
    

    
editor: visual
---


## design

::: panel-tabset

### 2025
:::: columns
::: {.column width="80%"}

#### plots

```{r}
#| fig-height: 3.6
#| fig-width: 10
library(ggplot2)
pl1<- ggplot(mtcars, aes(x = wt, y = mpg)) +
  geom_point(color = "blue", size = 3) +
  geom_smooth(method = "lm", color = "red", se = FALSE) +
  labs(
    title = "Relationship between Weight and MPG",
    x = "Weight (1000 lbs)",
    y = "Miles per Gallon"
  ) +
  theme_minimal()
pl1
```


```{r}
#| fig-height: 3.6
#| fig-width: 10

pl1

```

:::

::: {.column width="20%"}

#### text

<br><br><br><br><br><br>

some text
::: 

::::



### 2024

```{r}
#| fig-height: 3.6
#| fig-width: 10
pl1
```

```{r}
#| fig-height: 3.6
#| fig-width: 10
pl1
```




:::

if I use my browser on only 50% of my screen width it looks like below (fine)

and when I resize my browser or using different laptop it can look like this

[cderv]

I think this is about pixel size and how revealjs works. What is your screen size? Is it 4k maybe ?

  revealjs:
    width: 1280
    height: 720

this sets 720 pixels for the height.

#| fig-height: 3.6
#| fig-width: 10

This creates a PNG of size 960x345. So both plots will do (345 + 345) = 690 height. After that, there is the slide title, the tab set navigation, etc. Overall, there is too much content for the slide space.

The plot size needs to be reduced, and reveals do not fit in the space when they are several images, and all the more so when inside a tabset.

Revealjs offers some auto-scaling and size configuration https://revealjs.com/presentation-size/
Maybe it can be tweaked. It explains why you could also zoom out and see your full slide I think.

I don't know if we can offer something automatic (like figure responsive) - this would be a feature for Revealjs directly. 🤔

[antoine4ucsd]

thank you
I created a temporary fix by using

 revealjs:
   # width: 1280
    height: 80%

not ideal but it does the job for now. Ideally I would like to have a dynamic resizing adjusting the slide size and content to the screen size (like we have for smartphones)

[mcanouil]

This is definitely a feature for Reveal.js. Maybe there is already a Reveal.js plugin for that somewhere that you could leverage (and eventually packaged as a Quarto extension).

[antoine4ucsd]

ok. I will contact them and get back to you if I find a fix. thank you for your support