Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

About page `solana` template: profile image is not centred when the layout stacks

Abierto Apto para principiantes
  • ¿Algo no está bien?
#15,178 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
1/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
scss
Área
frontend

Línea de trabajo

El issue apunta a src/resources/projects/website/about/about.scss, líneas 110–123. Lee las reglas de media-breakpoint-down(lg) del diseño apilado y comprueba cómo les afecta la declaración posterior align-items: start. Renderiza el ejemplo de plantilla solana proporcionado a 700px y confirma que la imagen queda centrada sobre el texto mientras que el diseño ancho sigue en una fila.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

about-page bug layout websites
I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

Below the lg breakpoint the solana about template stacks the image above the text and centres the text, but the profile image stays on the left.

The stylesheet sets align-items: center for the stacked layout inside a media-breakpoint-down(lg) block, and then declares align-items: start on the next lines.
The second declaration has the same specificity and comes later, so it wins at every width.

Measured on a page with template: solana and an image:

Viewport Layout align-items Image
1280px row start beside the text, as intended
700px column-reverse start at the left edge, 256px left of the centre of the entity
400px column-reverse start at the left edge, 106px left of the centre of the entity

The text is centred in both stacked cases, so the page looks unbalanced.

At 1280px the layout is a row, as intended:

Solana about page at 1280px: the name, link and text on the left and the round profile image on the right.

At 700px the image stays at the left edge:

Solana about page at 700px: the round profile image is pinned to the left edge above the centred name, link and text.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  title: t

index.qmd:

---
title: "Jane Doe"
about:
  template: solana
  image: me.svg
  image-width: 8em
  links:
    - text: Example
      href: https://example.org
---

Jane writes about examples.

Render it and view the page at 700px wide.

Actual behavior

The image sits at the left edge of the stacked column, with the text centred below it.

Expected behavior

The image is centred above the text when the layout stacks, as the align-items: center in the stacked block intends.

Your environment
  • IDE: none, terminal only
  • OS: macOS (Darwin 27.0.0, Apple Silicon)
Quarto check output
Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 69592e5c1718d3e1b2f3d11e757d32e23a16af67
Lenguaje dominante
JavaScript
Estrellas
6.1k
Forks
471
Merge medio
17 h 35 min
PR fusionados (30 d)
107

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de quarto-dev/quarto-cli

Todos los issues de quarto-dev/quarto-cli

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.