Contrib.social

Incorrect XL breakpoint in Olivero

Open on Drupal.org →
Created on 13 April 2021, over 3 years ago
Updated 24 January 2024, 8 months ago

I've noticed what appears to be an incorrect px width declared inside olivero.breakpoints.yml

According to that file, the breakpoint for olivero.xl is

olivero.xl:
  label: X-Large
  mediaQuery: 'all and (min-width: 1300px)'
  weight: 3
  multipliers:
    - 1x

Im not seeing any noticeable layout changes at 1300px viewport width, the main changes seem to happen at 1200px.

Looking into the Olivero css I can see many references to 75rem (1200px at 16px base font size) and not many (2) at 81.25rem (1300px base font size) which leads me to believe the Olivero xl breakpoint is 1200px, not 1300px.

Problem/Motivation

Breakpoint file seems to reference an incorrect width

Steps to reproduce

  1. Install Drupal 9.x
  2. Enable Olivero
  3. Notice elements changing at breakpoint 1200px rather than 1300px (an example would be the site branding block)
@media (min-width: 75rem)
[dir="ltr"] .site-branding {
    padding-right: 2.25rem;
}

Proposed resolution

Alter the breakpoint file

🐛 Bug report
Status

Postponed: needs info

Version

11.0 🔥

Component
Olivero  →

Last updated about 8 hours ago

Created by

🇬🇧United Kingdom aaron.ferris

Live updates comments and jobs are added and updated live.
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 over 1 year ago →
    🇺🇸United States andy-blum Ohio, USA

    As @lauriii points out in #19, the breakpoints line up between the breakpoints.yml and the media-queries.pcss.css files

    /*
 * Media query breakpoints.
 * Processed by postcss/postcss-custom-media.
 */

@custom-media --sm (min-width: 500px);
@custom-media --md (min-width: 700px);
@custom-media --lg (min-width: 1000px);
@custom-media --xl (min-width: 1300px);

/* Navigation related breakpoints */
@custom-media --nav-md (min-width: 500px);
@custom-media --nav (min-width: 1200px);
@custom-media --max-nav (max-width: 1200px);

/* Grid related breakpoints */
@custom-media --grid-md (min-width: 700px);   /* Grid shifts from 6 to 14 columns. */
@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */

    olivero.sm:
  label: Small
  mediaQuery: 'all and (min-width: 500px)'
  weight: 0
  multipliers:
    - 1x
olivero.md:
  label: Medium
  mediaQuery: 'all and (min-width: 700px)'
  weight: 1
  multipliers:
    - 1x
olivero.lg:
  label: Large
  mediaQuery: 'all and (min-width: 1000px)'
  weight: 2
  multipliers:
    - 1x
olivero.xl:
  label: X-Large
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 3
  multipliers:
    - 1x
olivero.nav-md:
  label: Nav Medium
  mediaQuery: 'all and (min-width: 500px)'
  weight: 4
  multipliers:
    - 1x
olivero.nav:
  label: Nav
  mediaQuery: 'all and (min-width: 1200px)'
  weight: 5
  multipliers:
    - 1x
olivero.grid-md:
  label: Grid Medium
  mediaQuery: 'all and (min-width: 700px)'
  weight: 6
  multipliers:
    - 1x
olivero.grid-max:
  label: Grid Max
  mediaQuery: 'all and (min-width: 1440px)'
  weight: 7
  multipliers:
    - 1x

    While the 1200px breakpoint is used more frequently, I dont know that I agree we need to change the XL to match the nav breakpoint. Is there a UX or design argument to making this change other than there being a lesser-used breakpoint 100px away from a more commonly used breakpoint?

  • Comment 8 months ago →
    🇺🇸United States smustgrave

    Just wanted to follow up if anyone has a response for #34 before closing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024