Add columns per breakpoint setting for single columns

Created on 25 July 2022, over 2 years ago
Updated 22 March 2024, 11 months ago

Problem/Motivation

Sometimes its required to have more granular control about the column widths used on a specific device size.

Example 1: 3 Column Layout with very long words getting cut off, because of the low default column width on size 'medium'
=> Set Medium to 6/12 or 12/12 columns

Example 2: 3 Column Layout with just icons and a short buzzword, each cell becomes 100% width (12/12 columns), what doesn't look good and allocates to much space
=> Set Small to 4/12, so the icons are stay next each other

So this is a problem in both directions. The default lives somewhere in the middle of those examples.

Example 3: Nested layouts: No matter what the default column widths are, those layouts will break 100%.

Proposed resolution

Add options to override DROWL Layouts column sizes by device size.

The easier way: Equal width for all columns
Required fields:

  • Small Columns
  • Medium Columns
  • Large Columns

The complicated way: Custom width for each column (allows more complex layouts)
Required fields:

  • Column 1
    • Small Columns
    • Medium Columns
    • Large Columns
  • Column 2
    • Small Columns
    • Medium Columns
    • Large Columns
  • Column 3
    • Small Columns
    • Medium Columns
    • Large Columns
  • Column ...

In this case, the column width options should be something like (per Device Size):
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- auto (fill remaining space)
- min-content
- (max-content?)

Remaining tasks

User interface changes

API changes

Data model changes

Feature request
Status

Fixed

Version

1.0

Component

Miscellaneous

Created by

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.

Production build 0.71.5 2024