0

I was looking at http://www.w3.org/TR/css3-multicol/, but it only lets you specify column-width and column-count, potentially both (either individually, or through columns), but does not define any kind of way to specify, say, minimum width and maximum count.

For example, on the category index of OpenBSD ports, there are 71 categories, generally fitting in 9em.

If I use ul {-moz-column-width: 9em;}, then at 89em and above, there'd be at least 9 columns (89em = 9 × (column-width of 9em) + 8 × (column-gap of 1em)), making each column contain very few categories, and, IMHO, making it more difficult to navigate, since, even though the text would "look" left-to-right, you'd still have to navigate top-to-bottom. (Or is there a way to have a list of columns going left to right, instead of top-to-bottom?)

If I instead use -moz-column-count: 8;, then the site will be less usable on smaller screens, below about 70em or so.

Is there a solution?

cnst
  • 25,870
  • 6
  • 90
  • 122

1 Answers1

1

Yes, we can use @media queries to specify different rules for different screens.

http://www.w3.org/TR/css3-mediaqueries/

ul { -moz-columns: 9em; }

@media (min-width: 89em) {
  ul { -moz-columns: 8; }
}
cnst
  • 25,870
  • 6
  • 90
  • 122
  • you had -moz-columns instead of -moz-column-width. And actually, now that I'm looking again, inside the media query you should really have -moz-column-count. and while we're at it, the -webkit vendor prefixes, and the non-prefixed versions. – andi Apr 30 '15 at 17:04
  • @andi, I still don't understand what the typo is. Is `-moz-columns: 9em` not working for you for some reason? it works here just fine. – cnst Apr 30 '15 at 17:11
  • hmm, you know what - my mistake. It wasn't working for me at first, and I somehow assumed that the shorthand was buggy or something, but now that I'm testing it again, it's fine. I must have had a typo myself when I originally tested. I'm sorry - go ahead and roll back. – andi Apr 30 '15 at 20:28