Contrib.social

Olivero: 'wide-content' utility class breaks layout when placed in 'Hero' region

Open on Drupal.org →
Created on 8 July 2021, almost 4 years ago
Updated 19 March 2024, over 1 year ago

This is a regression from #3173008: [Code Review] wide image within article template a reusable component/class →

In that patch we add the wide-image CSS class based on the field type, view mode, and is_multiple.

Evidently, we also need to check for the region.

Problem/Motivation

Original post

I updated my website to Drupal 9.2.1 and this update brings a lot of bugs to the Olivero theme.

Responsive images did not work before, but this is even worse.

The "Hero" region spills over into the "Social Bar" region. The icons in the "Social Bar" region are no longer fixed, they will disappear if I scroll the page.

Steps to reproduce

  1. Install the theme and enable it.
  2. Create a custom block type for eg (hero banner). Add a field image in it and save it.
  3. Add a custom block (upload an image) and save it.
  4. Place the block in to Hero (full width) region and save it.
  5. You will see the issue.

Proposed resolution

Image has extra margin-inline-start inside
.region--hero .wide-content
Reset the margin-inline-start for the .wide-content inside .region--hero only with the following code

region--hero .wide-content {
  max-width: 100%;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

Remaining tasks

User interface changes

Before

After

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Fixed

Version

10.2 ✨

Component
Olivero  →

Last updated 8 days ago

Created by

🇫🇷France zenimagine

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

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

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

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024