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

vimaljoseph created an issue. See original summary.

  • vimaljoseph committed 18c05ab1 on 1.x
    fix: #3622818 Give every card one shape in the one-column mode
    
    By:...

  • vimaljoseph committed 012ea2bc on 1.x
    test: #3622818 Wait for the card width to settle in the phone layout...
vimaljoseph’s picture

Status: Active » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.