diff options
author | Jeff Kaufman <jeff.t.kaufman@gmail.com> | 2019-06-21 02:39:46 +0000 |
---|---|---|
committer | Drew DeVault <sir@cmpwn.com> | 2019-06-21 13:53:23 -0400 |
commit | 9a1cd340f384103918bedea0146c9665d242a437 (patch) | |
tree | b0fcabbce0da68f089a47af193565e6f502753ce | |
parent | f75cc73b8b7874d2125ce0b9ec2b650f9022a255 (diff) |
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
-rw-r--r-- | in.html | 11 |
1 files changed, 4 insertions, 7 deletions
@@ -22,6 +22,8 @@ <style> .webring .articles { display: flex; + flex-wrap: wrap; + margin: -0.5rem; } .webring .title { margin: 0; @@ -30,15 +32,10 @@ flex: 1 1 0; display: flex; flex-direction: column; - margin: 0 0.5rem; + margin: 0.5rem; padding: 0.5rem; background: #eee; -} -.webring .article:first-child { - margin-left: 0; -} -.webring .article:last-child { - margin-right: 0; + min-width: 10rem; } .webring .summary { font-size: 0.8rem; |