Problem/Motivation
Below 560px of container width the grid becomes one column, but each card keeps the aspect ratio of the image style its desktop slot was given. At 358px wide a 2×1 card is 158px tall and a 1×2 card is 710px tall, with the photograph in its middle third and blurred fill above and below. The 1×2 derivative is also the wrong file for a full-width box.
Proposed resolution
In the one-column mode every card takes one shape, --bento-phone-ratio, default 1200 / 1125, the ratio the small and big styles share. Each field card offers its small and big derivatives through srcset, so the browser picks by pixel density. The stylesheet sets --bento-phone: 1 on the grid there and the script reads it, so a theme can move or turn off the mode in CSS alone. Rendered-content cards take the shape and keep their image. Tablet and desktop are unchanged.
Comments
Comment #4
vimaljoseph commented