While on https://fair.pm/blog/2025/09/24/discover-trust-install-fair-1-0-is-here/ all imgs look fine, imgs with a set height look distorted on the main blog page https://fair.pm/blog/:
Probable cause
On both pages, the img is set to 'scale on click' in a lightbox, adding .wp-lightbox-container to the figure tag, triggering core CSS
.wp-lightbox-container { display: flex; flex-direction: column; position: relative; }
In the single template, the flex is overruled by
.article-content .wp-block-image, .editor-styles-wrapper .wp-block-image { display: block; [...] }
But on the archive template, it still renders as a flexbox, making an image with a fixed height and auto width distorted (forcing the img to use the full available width).
Proposed fix:
Make any .wp-lightbox-container align its children at start by adding
.wp-lightbox-container { align-items: flex-start; }
(note: this feels like a core bug/glitch; sorry for still not being able to do a quick PR...)
While on https://fair.pm/blog/2025/09/24/discover-trust-install-fair-1-0-is-here/ all imgs look fine, imgs with a set height look distorted on the main blog page https://fair.pm/blog/:
Probable cause
On both pages, the img is set to 'scale on click' in a lightbox, adding .wp-lightbox-container to the figure tag, triggering core CSS
.wp-lightbox-container { display: flex; flex-direction: column; position: relative; }In the single template, the flex is overruled by
.article-content .wp-block-image, .editor-styles-wrapper .wp-block-image { display: block; [...] }But on the archive template, it still renders as a flexbox, making an image with a fixed height and auto width distorted (forcing the img to use the full available width).
Proposed fix:
Make any .wp-lightbox-container align its children at start by adding
.wp-lightbox-container { align-items: flex-start; }(note: this feels like a core bug/glitch; sorry for still not being able to do a quick PR...)