Post B6ByqvqbLzETfABiG8 by annika@xoxo.zone
(DIR) More posts by annika@xoxo.zone
(DIR) Post #B6BxQIQjBSVFveoxX6 by mwl@io.mwl.io
0 likes, 0 repeats
Hey #wordpress folks! I'm stumped.My web site has shows book covers for everything I've written or appeared in. The images are have "align=alignleft". Most pages, this is fine.On a couple, though, as you widen the page, certain pics appear on the far right on short rows. It's like there's a hard line break somewhere? https://mwl.io/fiction/anthologies is an example.I'd rather have nice tidy rows. Any suggestions what I should look at? Or the search terms I need to use?
(DIR) Post #B6ByliQXp3T6aoVqIi by mensrea@freeradical.zone
0 likes, 0 repeats
@mwl there's something going on with the height of the items. when you set a fixed height, it sorts it's self out
(DIR) Post #B6ByqvqbLzETfABiG8 by annika@xoxo.zone
0 likes, 0 repeats
@mwl I think the bounding boxes interact in weird ways to cause unpredictable wrapping. You can verify by forcing the figure element to have a fixed height like 300pxI think if you make a div that only contains the figures, you can set it to display:flex and flex-wrap:wrap and it's all goodmaybe a person with more CSS smarts can recommend a better solution 🤷♀️
(DIR) Post #B6C32taxx7l7yApocy by threadi@mastodon.social
0 likes, 0 repeats
@annika @mwl Thats it. Use this CSS:.entry-content > figure { height: 360px;}Or combine all pictures in one group block and configure this as grid or flex.
(DIR) Post #B6C32tlxIGY8WFyaky by mwl@io.mwl.io
0 likes, 0 repeats
@threadi @annika Thanks, folks! Will try that.The images should (important word, *should*) all be 300px tall. I resized them all by hand, though, so I could well have screwed up.At least they're all small...
(DIR) Post #B6C4PfBrm8hluNVzDk by annika@xoxo.zone
0 likes, 0 repeats
@mwl yeah it probably wraps weird when a caption is extra long