The issue:

The left and right margin and padding on the blockquote element is applied at the same amount across all screen sizes, leaving little room for the content on smaller screens.

Screenshot of blockquote in Umami

Proposed change:

Remove left and right margin and reduce padding on all sides as a default and increase margin/padding at medium and large breakpoints.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kjay created an issue. See original summary.

kjay’s picture

Here's a patch for review. Thanks @shaal for flagging this issue.

Screenshots with the patch applied:

Umami blockquote small

Umami blockquote medium

Umami blockquote medium

shaal’s picture

Added a small fix, that the last <p> inside <blockquote> would have no extra space at the bottom.

Before the change:
p inside blockquote that has margin-bottom

After the change, I think quotes look more symmetric:
p inside blockquote that has no margin-bottom

The change also supports having multiple paragraphs inside one quote:
multiple p inside blockquote that has no margin between but not at the bottom

kjay’s picture

This looks good to me. +1 for RTBC.

smaz’s picture

Version: 8.7.x-dev » 8.8.x-dev
Status: Needs review » Reviewed & tested by the community
FileSize
193.55 KB

Patch looks good to me!

Tested, the content looks as expected - see attached.

  • Gábor Hojtsy committed bcbcbdc on 8.8.x
    Issue #3039256 by kjay, shaal, smaz: Improve Umami demo blockquote...
Gábor Hojtsy’s picture

Version: 8.8.x-dev » 8.7.x-dev
Status: Reviewed & tested by the community » Fixed

Superb, thanks!

  • Gábor Hojtsy committed e616948 on 8.7.x
    Issue #3039256 by kjay, shaal, smaz: Improve Umami demo blockquote...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.