From 9a1cd340f384103918bedea0146c9665d242a437 Mon Sep 17 00:00:00 2001 From: Jeff Kaufman Date: Fri, 21 Jun 2019 02:39:46 +0000 Subject: style: keep articles from being horizontally compressed In the default style for openring articles are arranged horizontally. This is fine with a small number of articles or a wide screen, but can look squashed when you don't have those. Current behavior, on a "Galaxy S5" in Chrome Devtools: https://www.jefftk.com/openring-example-nowrap.png Instead, give each article a minimum width and tell flexbox to wrap as needed. To maintain spacing between the articles without adding spacing around the edges, follow the approach described in: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items#Creating_gutters_between_items This gives us new wrapping behavior on narrow screens, without changing behavior on wider screens: https://www.jefftk.com/openring-example-wrap.png --- in.html | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/in.html b/in.html index 088a6bc..d1437e8 100644 --- a/in.html +++ b/in.html @@ -22,6 +22,8 @@