Text alignment in About Pages

[harrysw1729]

Description

I am creating a website using Quarto. I noticed that the about pages with template solana will centre the texts when the screen is narrow, e.g. mobile phone.

Here is an example to illustrate the question. The project has three files: _quarto.yml, index.qmd, and page.qmd.

For _quarto.yml:

project:
  type: website

website:
  navbar:
    right:
      - text: "About"
        href: index.qmd
      - text: "Page"
        href: page.qmd

For index.qmd:

---
title: "About"
about:
  template: solana
---

## Title

- Item 1
- Item 2

Lastly, for page.qmd:

---
title: "Page"
---

## Title

- Item 1
- Item 2

After rendering the website with quarto render, the about page centred the text that leaves this large space between bullets and item content:

In contrast, the usual webpage seems free of this issue:

Is there any quick solution to this? I tried to work with the CSS, but I don't know what selectors I should be looking at. Thank you very much for your help! 😃

[mcanouil]

To find the selector you need to use your favourite browser inspect/developer mode.
Note that since it's dependent on the screen there will me a @media component.

Source code: https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/projects/website/about

edit:

ul {
  list-style-position: inside;
}

[harrysw1729]

Thanks for the help!

Since I only needed the template to streamline the formatting of bio, photo, and icons, one quick workaround I've found is to put the lists outside the template div as explained in the docs here. 😄