Contrib.social

Three column layout - widths as 33.33%

Open on Drupal.org →
Created on 22 September 2023, 9 months ago
Updated 18 June 2024, 10 days ago

Problem/Motivation

I found the issue using a 3 column layout. The width breakdown is 33/34/33. So, the middle columns is actually 1% wider than the other two. It seems not to be too much, but if you try to use images, it results in the middle one appearing missaligned.

Steps to reproduce

1. Select a theme other than olivero. For example: stark
2. Set the images width to 100%
In the file "core/modules/layout_builder/layouts/threecol_section/threecol_section.css" set:

.layout--threecol-section img {
  width: 100%;
  height: auto;
}

3. Using Layout builder create a three column section.
4. Create a custom block type with a field image
4. Create and add a block with the same image to each column. Since the images are set to have 100% width, ie. fill the width of the column, the middle one will appears to have a height greater than the others.

Proposed resolution

Use calc(100% / 3) to set the flex property so that they become 33.3333333333% (like bootstrap does)

Also, use

  .layout--threecol-section--33-34-33 > .layout__region {
    flex: 0 1 calc(100% / 3);
  }

instead of

  .layout--threecol-section--33-34-33 > .layout__region--first,
  .layout--threecol-section--33-34-33 > .layout__region--third {
    flex: 0 1 33%;
  }
  .layout--threecol-section--33-34-33 > .layout__region--second {
    flex: 0 1 34%;
  }

Images from bug

IS:

SHOULD:

Remaining tasks

1. Do the patch to replace the CSS code.

Other topics

In order not to break themes that already use this class, it should not be renamed.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Layout builder  →

Last updated about 1 hour ago

Created by

🇩🇪Germany juagarc4

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.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024