Opened 6 years ago
Last modified 6 months ago
#46262 new defect (bug)
Twenty Nineteen: odd content_width in theme
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 5.0 |
Component: | Bundled Theme | Keywords: | needs-patch |
Focuses: | Cc: |
Description
The global value $content_width is set to 640px in Twenty Nineteen. I can't see anywhere that this value even makes sense. Any text within an article is in a box 932px wide, and the posts themselves are in a container that is 1524px.
Now, what does it matter? The theme displays things correctly via CSS, but this value is used by image optimization features in Jetpack and EWWW Image Optimizer (possibly others). The result is that we have 640px images (roughly) displaying in containers that are at least 932px. Best I can tell, Twenty Nineteen will display them at whatever size the user chooses: large=1024px, while full-width is 1905px, and wide-width is 1404px.
Perhaps there is information from Gutenberg itself that can be leveraged by these plugins, but setting content_width to a more sensible default would be a good start.
Change History (3)
#1
@
6 years ago
- Milestone changed from Awaiting Review to Future Release
- Summary changed from odd content_width in Twenty Nineteen theme to Twenty Nineteen: odd content_width in theme
#2
@
10 months ago
- Keywords needs-patch 2nd-opinion added
- Version changed from 5.0.3 to 5.0
Numbers in the description reflect a viewport width of (around) 1920 pixels. Twenty Nineteen's design does not have a maximum content width, so images (that line up with paragraphs) can be even wider than 932 pixels.
- viewports up to 767px can show images as wide as 723 pixels (
.entry-content
hasmax-width:100%-2rem
, image hasmax-width:100%
) - viewports from 768px to 1167px show images up to 750 pixels wide (
.entry-content
max-width:80%
, imagemax-width:66.7vw-28px
) - viewports 1168px and wider can show images from 556 pixels wide to much larger (
.entry-content
hasmax-width:80%
, image hasmax-width:50vw-28px
)
Twenty Nineteen's $content_width
variable was set to 640 at the theme's initial commit, and that matches the value Underscores had at the same time. For comparison, Twenty Twenty-One started with 750, which matched Seedlet's initial width but later Seedlet reduced it to 620.
Seedlet's change suggests that editing the value for Twenty Nineteen is feasible, though I am not eager to change it after five years. The theme has had the twentynineteen_content_width
filter, and at least EWWW has a filter too.
Thanks for this report, @nosilver4u!
I suspect the current
640px
comes from the theme being based on Underscores, since that's the default there: https://github.com/Automattic/_s/blob/master/functions.php#L97I agree that it should be updated to reflect actual widths in the theme.