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.
Remove left and right margin and reduce padding on all sides as a default and increase margin/padding at medium and large breakpoints.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | 3039256-test.png | 193.55 KB | smaz |
| #3 | interdiff_2-3.txt | 425 bytes | shaal |
| #3 | drupal_umami-blockquote-responsive-3039256-3.patch | 793 bytes | shaal |
| #3 | quote-with-2-p.png | 407.3 KB | shaal |
| #3 | quote-last-p-no-margin.png | 428.18 KB | shaal |
Comments
Comment #2
kjay commentedHere's a patch for review. Thanks @shaal for flagging this issue.
Screenshots with the patch applied:
Comment #3
shaalAdded a small fix, that the last
<p>inside<blockquote>would have no extra space at the bottom.Before the change:
After the change, I think quotes look more symmetric:
The change also supports having multiple paragraphs inside one quote:
Comment #4
kjay commentedThis looks good to me. +1 for RTBC.
Comment #5
smazPatch looks good to me!
Tested, the content looks as expected - see attached.
Comment #7
gábor hojtsySuperb, thanks!