如何在移动端隐藏Quarto网站column-margin区域图片或调整位置？

针对你遇到的移动端查看时column-margin区域图片遮挡正文的问题，有两种可行的解决方案，直接修改_quarto.yml配置即可实现：

方案一：移动端隐藏column-margin区域的图片 #

通过CSS媒体查询，针对小屏幕设备隐藏指定区域或图片：

修改_quarto.yml中的format.html部分，添加自定义样式：

format:
  html:
    theme: Zephyr
    embed-resources: true
    toc: true
    toc-expand: FALSE
    toc-depth: 4
    toc-location: right
    toc-collapsed: false
    grid:
      sidebar-width: 300px
      body-width: 1000px
      margin-width: 500px
      gutter-width: 1.5rem
    # 新增以下内容
    include-in-header:
      - text: |
          <style>
            /* 针对屏幕宽度≤768px的移动端设备 */
            @media (max-width: 768px) {
              /* 隐藏整个column-margin区域（包含图片和其他内容） */
              .column-margin {
                display: none;
              }
              /* 如果你只想隐藏图片，保留margin里的其他文字，就用下面这行替换上面的 */
              /* .column-margin img {
                display: none;
              } */
            }
          </style>

方案二：移动端将column-margin内容移至页面末尾 #

如果不想隐藏图片，而是让它在移动端显示在正文最后，同样用CSS调整布局顺序：

修改_quarto.yml中的format.html部分：

format:
  html:
    theme: Zephyr
    embed-resources: true
    toc: true
    toc-expand: FALSE
    toc-depth: 4
    toc-location: right
    toc-collapsed: false
    grid:
      sidebar-width: 300px
      body-width: 1000px
      margin-width: 500px
      gutter-width: 1.5rem
    # 新增以下内容
    include-in-header:
      - text: |
          <style>
            @media (max-width: 768px) {
              /* 把页面容器设为垂直方向的flex布局 */
              .page-layout {
                display: flex;
                flex-direction: column;
              }
              /* 调整顺序，让margin区域在正文之后 */
              .column-margin {
                order: 2;
                margin-top: 2rem; /* 给图片和正文之间加个间距 */
              }
              .column-body {
                order: 1;
              }
            }
          </style>

修改完成后重新渲染网站，移动端查看时就不会出现图片遮挡正文的问题了。

内容的提问来源于stack exchange，提问作者flâneur