r-markdownxaringan

How to adjust title size or banner size of a single slide in xaringan


I have encountered an issue with the size of banner title as in the following picture.

enter image description here

It is two-line title, which does not fit into the banner. Is there any way to make the banner size bigger (vertically increased) or to make font size of title smaller.

I would appreciate it if you could show me both ways. Thanks.

My code is

---
title: "Lecture"
subtitle: "subtitle"
author: "Instructor"
institute: "University"
output: 
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts, "styles.css"]
    lib_dir: libs
    seal: false
    nature:
      highlightStyle: arta
      highlightLines: true
      countIncrementalSlides: false
      titleSlideClass: [top, left]
 
---
class: title-slide, top, left, inverse
background-image: url(aaa.jpeg)
background-size: cover

# *`r rmarkdown::metadata$title`*
## *`r rmarkdown::metadata$subtitle`*
### `r rmarkdown::metadata$author`
### `r rmarkdown::metadata$institute`
### `r rmarkdown::metadata$date`
### `r Sys.Date()`

```{css, echo=FALSE}
<style>
.remark-slide-content.hljs-default {
  border-top: 40px solid #23373B;
}

.remark-slide-content > h1 {
  font-size: 35px;
  margin-top: -85px;
}

</style>
```

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

---

# Why people are constantly switching jobs, causing frictional unemployment?

---

The updated version of problematic page is written in the following way:


---
class: custom
```{css, echo=FALSE}
.remark-slide-content .hljs-default {
  border-top: 40px solid #23373B;
}

.remark-slide-content > h1 {
  font-size: 35px;
  margin-top: -85px;
}

.custom h1 {
font-size: 24px;
}
```
# Causes of unemployment: Why people are constantly switching jobs, causing frictional unemployment?

### .my-style1[Sectoral shifts]

### .my-style1[Structural shifts]

### Seasonal changes

### Taste shocks

---


Solution

  • To define CSS rule for a specific slide (It might be to change the title font size of that specific slide or to do anything), define a class: your-class-name just after creating a new slide with the ---.

    So to change the title font size of that single slide, we write class: custom just after --- and then define CSS rule in css chunk for .custom to reduce the font-size.

    ---
    title: "Lecture"
    subtitle: "subtitle"
    author: "Instructor"
    institute: "University"
    output: 
      xaringan::moon_reader:
        css: [default, metropolis, metropolis-fonts, "styles.css"]
        lib_dir: libs
        seal: false
        nature:
          highlightStyle: arta
          highlightLines: true
          countIncrementalSlides: false
     
    ---
    class: title-slide, top, left, inverse
    background-image: url(lights.jpg)
    background-size: cover
    
    # *`r rmarkdown::metadata$title`*
    ## *`r rmarkdown::metadata$subtitle`*
    ### `r rmarkdown::metadata$author`
    ### `r rmarkdown::metadata$institute`
    ### `r Sys.Date()`
    
    
    ```{css, echo=FALSE}
    .remark-slide-content .hljs-default {
      border-top: 40px solid #23373B;
    }
    
    .remark-slide-content > h1 {
      font-size: 35px;
      margin-top: -85px;
    }
    
    .custom h1 {
    font-size: 24px;
    }
    ```
    
    
    ---
    class: custom
    
    # Why people are constantly switching jobs, causing frictional unemployment?
    
    ---
    
    # Heres another slide title