-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Gallery: Ensure last image takes up all available space #38189
Conversation
max-width: 100%; | ||
// Ensure max-width is not overridden on the img when the parent gallery has | ||
// wide or full alignment. | ||
max-width: 100% !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This specifically was necessary for the frontend on Twenty Nineteen, to override:
@media only screen and (min-width: 768px)
.entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
max-width: calc(8 * (100vw / 12) - 28px);
As the alignfull
/alignwide
class is present on the container but not included on the img
children.
Size Change: +18 B (0%) Total Size: 1.14 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This tested well for me on 2019, 2020, tt1, tt1-blocks, tt2 in editor and frontend.
Fixes #38156
Description
In the Gallery block, if the last row contains a single image it should scale up to use all the available space. Some theme styles for the
full
andwide
alignment options were limiting the max-width of Images and preventing this from working correctly for full/wide-aligned Galleries. This PR adds amax-width: 100%
to override those styles.How has this been tested?
Tested in Twenty Twenty-One, Twenty Twenty, Twenty Nineteen, Seedlet, and TT1-blocks.
For each theme:
Make sure to test Twenty Nineteen, because it has highly specific rules that target the
img
and required higher specificity to override.Screenshots
Types of changes
Checklist:
*.native.js
files for terms that need renaming or removal).