I can't figure out how to create vertical slides

[eugenekudashev]

Hello!

I'm looking to create "slide decks" which are mobile-first and possibly mobile-only: where slides are vertical, say 1080x1920px

I can't figure out how to do that with marp

• The size setting in marp (in the front matter) seems to be only 4:3 or 16:9, and I can't figure out how to change it to let's say 3:4 or 9:16 or 1:2 for that matter
• I've tried changing slide width with custom css, but didn't succeed with that either

Is there a way to do it that I'm missing, or am I desperately trying to hit a dead end?

Thank you for any help! marp is absolutely great and wonderful :)

[yhatt]

You have to use custom theme CSS for changing the slide size. Take either of the following ways:

Set vertical slide as the default size (A way complied with Marpit framework)

Declare the width and height of the section element in your theme CSS to set the default size of the slide. Don't need to set size global directive in Markdown.

/* @theme vertical */

@import 'default';

section {
  width: 1080px;
  height: 1920px;
}

---
theme: vertical
---

# Vertical slide

Add "9:16" size preset to the theme (A way complied with Marp Core)

size global directive is a part of Marp Core extensions, not base framework Marpit.

If you want to allow choosing the vertical size from presets, declare @size metadata in your custom theme CSS.

/* @theme vertical */
/* @size 9:16 1080px 1920px */

@import 'default';

Now Markdown author can choose 9:16 size preset via size global directive.

---
theme: vertical
size: 9:16
---

# Vertical slide

To disable size presets inherited from the built-in theme, declare @size [preset-name] false.

/* @theme vertical */
/* @size 4:3 false */
/* @size 16:9 false */
/* @size 9:16 1080px 1920px */
/* @size 3:4 1080px 1440px */

@import 'default';

section {
  /* Set the default size as same as 9:16 preset */
  width: 1080px;
  height: 1920px;
}

[eugenekudashev]

Thank you so much for such a detailed response! I'll try this right away :)