Add a max-width option

Created on 10 May 2022, over 2 years ago
Updated 8 March 2024, 10 months ago

Problem/Motivation

As a page editor I need to be able to limit specific elements / paragraphs in width.

For example: I have an image paragraph with an SVG logo inside, the paragraph is located in a layout, but the column width is too large - so the logo is too. Furthermore there might be other contents/paragraphs in this column, that should not be limited in width.

Proposed resolution

Add a settings field to limit the width. I think we should allow the editors to set any value in any format (px, %, em, rem, ...).
So its probably simply a text field with some examples.

Like many other values, this should be configurable by device size - but probably in a future release, where we add the device size options to the other settings also.

Remaining tasks

Add the max-width text field to the DROWL Paragraphs Settings "spacings"-tab (next to the min-height setting).

Figure out how to add the CSS code - I think we should:
- Set a class "max-width" and add the stylesheets to the drowl_paragraphs frontend CSS file: .max-width{ max-width: var(--max-width); }
- Set Inline-CSS-Style:
<div class="paragraph ..." style="--max-width: USER-INPUT">[...]</div>

Feature request
Status

Needs work

Version

1.0

Component

User interface

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