CODEWITHSUNDEEP
rrstudioquartoreveal.js
tpetzoldt
tpetzoldt

Reputation: 5813

Add space between columns in Quarto (reveal.js) presentation

I am creating Quarto slides and use a two-column layout to compare code segments. However, I want to add some space between the columns, especially for longer code lines. As a workaround, I've added a third column in the middle, but I would prefer a more elegant css solution

---
title: "Test"
format: revealjs
---

## Two columns without space

::: {.column width="49%"}
```{r, echo=TRUE}
x <- runif(100)
plot(x)
```
:::

::: {.column width="49%"}
```{r, echo=TRUE}
x <- rnorm(100)
plot(x)
```
:::

## Two columns with space

::: {.column width="44%"}
```{r, echo=TRUE}
x <- runif(100)
plot(x)
```
:::

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

::: {.column width="44%"}
```{r, echo=TRUE}
x <- rnorm(100)
plot(x)
```
:::

two columns with space

Upvotes: 1

Views: 657

Answers (1)

Julian
Julian

Reputation: 9250

You can add the space with an additional css class (the trick is to create the columns such that that both do not cover 100%):

---
title: "Test"
format: revealjs
---

<style>
.add-space{
padding-right: 11%;
}
</style>


## Two columns without space

::: {.column width="44%" .add-space}
```{r, echo=TRUE}
x <- runif(100)
plot(x)
```
:::

::: {.column width="44%"}
```{r, echo=TRUE}
x <- rnorm(100)
plot(x)
```
:::

Upvotes: 2

Related Questions