increasing font size on mobile devise partially work.

[wilcar]

Hello,
I want to increase the font size of my quarto website when displayedt on a screen phone in portrait mode.
I've added something classic to my css to solve this problem.

@media only screen and (max-width: 600px) { body { font-size: 3rem; } }

The issue is that this only applies to the left-hand menu ! (the big "fiche1") !

[mcanouil]

You'll have to use your browser inspect/development tool to figure out the selector you need to tweak in your CSS.

[wilcar]

Many things are not clear because I am a beginner.
should I add the rule in scss or css?

I've tried using "main" or "equarto-content", but nothing works. Is there a selector that returns all the elements on the web page?
I've attached a screenshot.

[mcanouil]

Quarto offers access to some level of customisation, see https://quarto.org/docs/output-formats/html-themes.html#sass-variables.

Unfortunately, for more advanced customisation, you'll have to learn CSS/SCSS/HTML on your own and/or ask your question in places focusing on CSS/SCSS/HTML.

To note, here or elsewhere, without any working example, there is no way someone can help.

[wilcar]

Here's a reproducible example:
When I build the site and view the web page in portrait mode (Firefox Ctrl-Shift-M), all the characters except the navbar menu and the Callout are enlarged.
with the media only css rule.

How can I increase the navbar font size and Callout font size?

---
title: "test"
---

This is a Quarto website.

To learn more about Quarto websites visit <https://quarto.org/docs/websites>.

```{r}
1 + 1
```

:::{.callout-warning collapse=false appearance='default' icon=true}
## Optional caption (warning)
- Hide callout body with 'collapse=true'
- Remove 'collapse' to prevent expandability
- Set appearance to 'default', 'simple' or 'minimal'
- Remove icon with 'icon=false'
:::

Css file :
I added this rule to my styles.css file

/* css styles */
@media only screen and (max-width: 800px) {
	.content {
	font-size: 2rem;
  }
}

My yaml file :

project:
  type: website

website:
  title: "test"
  navbar:
	left:
	  - href: index.qmd
		text: Home
	  - about.qmd

format:
  html:
	theme: cosmo
	css: styles.css
	toc: true

editor: visual

[mcanouil]

Could you format properly your post? Also why everything is translated in French?

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[wilcar]

Ok Done.

[mcanouil]

You need to use your favourite browser developper mode and look for the element.
You'll see that the navbar has it's own not relative size.