Skip to content

Education terminal causes horizontal overflow at 320–322px #36

Description

@PowerBuilderr

Hi! I found a small responsive layout issue in the Education section of the deployed portfolio.

How to reproduce

  1. Open the portfolio in Chromium.
  2. Enable responsive device mode.
  3. Navigate to the Education section.
  4. Test viewport widths from 320px to 323px.

Observed results

  • At 320px: viewport width is 320px, document width is 324px — 4px horizontal overflow.
  • At 322px: viewport width is 322px, document width is 324px — 2px horizontal overflow.
  • At 323px: viewport width is 323px, document width is 324px — 1px difference.

The terminal/code window is not fully centered at these widths. It touches the right edge and is slightly clipped at 320px.

The automated failure range ends at 322px because the scan uses a 1px overflow tolerance.

Expected result

The terminal should fit inside the viewport with equal spacing on both sides and should not increase the document width.

I’ve attached:

  • the automated WIDTHSCAN report;
  • a manual reproduction at 320px.

Disclosure: I maintain WIDTHSCAN, the open-source CLI used for the initial scan. I manually reproduced the issue in the browser before reporting it.

Image Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions