How to increase size logo in quarto reveal.js presentation

Question

In my quarto reveal.js presentation, I added a logo bottom left in the slide template by placing this in the yaml:

format: 
  revealjs:
    logo: mylogo.png

The logo is displayed very small. Anyone a suggestion on how to increase the size? Thanks!

Adelric

Answer 1

logo image in the quarto revealjs has the class slide-logo. So to increase the size, you just need to apply the following CSS rules to this .slide-logo selector.

---
title: "Increasing Logo size"
format: 
  revealjs:
    logo: image.png
    css: logo.css
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations, see <https://quarto.org/docs/presentations/>.

logo.css

.reveal .slide-logo {
  height: 100px !important;
  width: 100px !important;
  max-width: unset !important;
  max-height: unset !important;
}

---

---

Change the value of CSS properties height and width as you need, and Do not forget the !important

EDIT:

• Depending on how max-height, height, and the size of the image file correspond, the logo moves upwards. To avoid this, try using max-height only.

Honorine