Contrib.social

Text resize on wide screen layout also causes reflow to single column, making the layout too wide

Open on Drupal.org →
Created on 11 August 2020, over 4 years ago
Updated 20 January 2023, almost 2 years ago

Problem/Motivation

Users might have customized their font sizes in their browser to larger default sizes. When this is done, the form layout, even on a wide-screen, is defaulting to the single column layout. This causes the text paragraphs and the field widths to be untenably wide.

For users with low vision, or even subtle near-field vision decline, increasing default font sizes is often something they. will do to make browsing easier. Since it is a system-level preference, they may not even recall that they have made this settings change at some point.

Extremely wide paragraphs and text fields are difficult to read and use.

I would consider this issue a "should" fix instead of a "must" fix because the experience is still technically usable, but it becomes more difficult.

Steps to reproduce

In your browser settings, adjust your default font size to one of the larger options. E.g., in Chrome:

  1. Chrome -> Preferences
  2. Scroll down to "Appearance"
  3. Find "Font size" and change it to "Very Large"
  4. Chrome should update dynamically

Proposed resolution

Maintain the two column layout when the width is still over 900, or set a max width on the content area so that it won't get too wide.

🐛 Bug report
Status

Active

Version

10.1 ✨

Component
Claro  →

Last updated 3 days ago

Created by

🇺🇸United States rainbreaw

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment about 2 months ago →
    🇮🇳India Preeti.chawla

    I attempted to troubleshoot and resolve this issue locally using various methods, such as applying max-width and utilizing media queries.

    I discovered a potential solution that involves using media queries specifically for cases where the font size is set to large or very large.

    CSS for Font Size-Specific Adjustments
    To detect when the user has changed their default font size, I recommend using the @supports rule. This allows for adjustments to the form layout or text styles accordingly:

    css
    @supports (font-size: var(--font-size-large)) {

    .layout-form {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(0, 3fr) minmax(22.5rem, 1fr);
    gap: var(--space-l);
    }

    .layout-region--main,
    .layout-region--footer {
    grid-column: 1;
    margin-inline: auto;
    width: var(--layout-region-edit-width);
    }

    /* When the layout has vertical tabs */
    .layout-region--main:has(.vertical-tabs),
    .layout-region--main:has(.vertical-tabs) ~ .layout-region--footer {
    width: var(--layout-region-edit-extended-width);
    }

    /* Push sidebar down to horizontal align with form section. */
    .layout-region--secondary {
    grid-row: span 2;
    margin-block-start: var(--space-l);
    }

    @media (max-width: 40rem) {
    .layout-form {
    grid-template-columns: 1fr;
    }
    }
    }

    I have tested the above solution locally, and it is working well. Please refer to the screenshot for reference.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024