[wp-trac] [WordPress Trac] #62819: Twenty Fourteen: Latest Comments block font-size does not change with user settings

[WordPress Trac]

#62819: Twenty Fourteen: Latest Comments block font-size does not change with user
settings
-----------------------------------------+------------------------------
 Reporter:  nidhidhandhukiya             |       Owner:  (none)
     Type:  defect (bug)                 |      Status:  new
 Priority:  normal                       |   Milestone:  Awaiting Review
Component:  Bundled Theme                |     Version:
 Severity:  normal                       |  Resolution:
 Keywords:  has-patch changes-requested  |     Focuses:  css
-----------------------------------------+------------------------------

Comment (by sabernhardt):

 > making the **XL font size responsive**

 I do not think that the XL size is a good choice for the Latest Comments
 block at any screen size, especially with Twenty Fourteen.
 - Both the Large (36px) and XL (42px) presets are larger than the post
 title's size of 33 pixels.
 - The block is often used in a widget area, and those can be quite narrow
 on larger screens. When the Primary Sidebar is 162 pixels wide, even the
 Large preset is too big there. Many words—including "screen"—would break
 onto multiple lines. These are the measurements on screens larger than
 1008 pixels:
   - Primary Sidebar: either 122 or 162 pixels wide
   - Footer Sidebar: 25%, or 192 to 255 pixels, wide
   - Content Sidebar: 29%, or 232 to 306 pixels, wide

 ----

 Also, if the block displays avatars, increasing the font size (at all) can
 create an issue with the margin for the excerpts and comment meta. Twenty
 Fourteen defines a left margin of 60 pixels while the `block-library`
 styles assign relative measurements for the
 [https://github.com/WordPress/gutenberg/blob/1553653fc76ebaf1512d0a838051714a6fe4f784/packages
 /block-library/src/latest-comments/style.scss#L44-L47 margin] and the
 [https://github.com/WordPress/gutenberg/blob/1553653fc76ebaf1512d0a838051714a6fe4f784/packages
 /block-library/src/latest-comments/style.scss#L66-L68 avatar dimensions].
 If the margin is worth fixing, I can think of two different directions.
 1. Use a relative margin that is equal to 60 pixels with the default font
 size. This would continue allowing the image size to increase with the
 text, which can make the image blurry if it stretches beyond 48 pixels
 (with font size greater than 19.2 pixels).
 {{{
 .has-avatars .wp-block-latest-comments__comment .wp-block-latest-
 comments__comment-excerpt,
 .has-avatars .wp-block-latest-comments__comment .wp-block-latest-
 comments__comment-meta {
         margin-left: 3.75em;
 }
 }}}
 2. Insist that the avatar is a specific size, regardless of the block's
 font size. Setting a font size on the image would still use the relative
 measurements from `block-library` for `width`, `height` and `margin`.
 {{{
 .wp-block-latest-comments .avatar,
 .wp-block-latest-comments__comment-avatar {
         font-size: 16px;
 }
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62819#comment:13>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform