Adjusting width of about page templates

[nurfatimaj]

Hi!

I like using the trestles template for my about page. However, I find the default width to be too narrow (by the way, I couldn't get broadside template to load the about image 🤷🏽‍♀️).

I was wondering if somebody knows a good way to adjust the width of the template to the desired level in a way that it would also work nicely with different screen sizes?

I managed to get a different width by controlling the flex-grow, flex-shrink and flex-basis CSS properties of .about-contents and .about-entity classes. Here, are the lines from my styles.css file

.about-contents {
  flex-grow: 3 !important;
  flex-shrink: 0 !important;
  flex-basis: 80% !important;
}

.about-entity {
  flex-grow: 0 !important;
  flex-shrink: 3 !important;
  flex-basis: 20% !important;
}

However, these do not work very well with some screen sizes. When it is fairly large, but not full-screen, the text remains too wide and a user needs to scroll the page horizontally. For smaller screen sizes it adapts nicely without a problem.

I'd appreciate any tip!

[mcanouil]

You can use special CSS rules:

@media(max-width: 991.98px){
...
}

See https://www.w3schools.com/css/css3_mediaqueries.asp and some other online examples/documentation about this.

Also, why don't you change the default width CSS attributes for this layout by modifying the page layout (https://quarto.org/docs/output-formats/page-layout.html)? Setting page-layout: full should give you what you want without having to tweak (S)CSS.

FYI, the default specific SCSS for the template you are interested in is:
https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/projects/website/about/about.scss#L165-L223

[netw0rkf10w]

Also, why don't you change the default width CSS attributes for this layout by modifying the page layout (https://quarto.org/docs/output-formats/page-layout.html)? Setting page-layout: full should give you what you want without having to tweak (S)CSS.

Could you please be more specific? I tried adding page-layout: full but nothing seems to change:

---
title: "About"
image: profile.jpg
about:
  id: hero-heading
  template: trestles
html:
  page-layout: full
---

[mcanouil]

I don't recall testing this at the time.
And since then, there were many improvements on the grid layout customisation ability which could have impacted this, see https://quarto.org/docs/output-formats/page-layout.html#grid-customization.

[netw0rkf10w]

@mcanouil Thanks a lo!