Hide margin - HTML layout

[Juuso1]

Description

Hi,

How can I hide margin in HTML layout? I want only sidebar and body.

Br,
Juuso

[mcanouil]

See https://quarto.org/docs/output-formats/page-layout.html#html-page-layout for options to modify HTML layout.

[Juuso1]

Okey, if I want to hide margin and titles in it, is it so?

format:
html:
grid:
sidebar-width: 300px
body-width: 900px
margin-width: 0px

[mcanouil]

I don't understand your question.

Please use code blocks to share code in your message.
Also, please consider sharing a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

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.
````

[Juuso1]

Hi,

I try to hide margin content. Here below there is one short mention (bold) about this thing. I think I have to specify sidebar (20%) and body (80%) then I think margin should disapear.

The values of these variables don’t directly specify the display width of the corresponding component, instead they specify a maximum base value. The maximum values are scaled to create minimum values, and together they are used to compute the size and position of each component across different layout types (fixed vs. floating), responsive sizes (large screen vs. mobile size), and page contents (margin vs. no margin content).

[Juuso1]

Problem solved! Solutions below (theme.scss file)

/-- scss:defaults --/
// The left hand sidebar
$grid-sidebar-width: 300px !default;

// The main body
$grid-body-width: 900px !default;

// The right hand margin bar
$grid-margin-width: 0px !default;

// The gutter that appears between the above columns
$grid-column-gutter-width: 1.5rem !default;