Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,178 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
1/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
82/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
scss
Lĩnh vực
frontend

Hướng nghiên cứu

Issue trỏ đến src/resources/projects/website/about/about.scss, dòng 110–123. Đọc các quy tắc media-breakpoint-down(lg) của bố cục xếp chồng và kiểm tra khai báo align-items: start phía sau ảnh hưởng đến chúng như thế nào. Render ví dụ template solana được cung cấp ở 700px và xác nhận hình ảnh nằm chính giữa phía trên văn bản, trong khi bố cục rộng vẫn là một hàng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
471
Merge trung bình
17 giờ 35 phút
Pull request đã merge (30 ngày)
107

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.