Sorry - forgot to reset the ul padding, I've just updated the pen
On Fri, Aug 30, 2013 at 10:04 PM, Chris Rockwell <ch...@chrisrockwell.com>wrote: > In the past I have done a couple different routes - 1 server side, 1 > client side. Both involved calculating the number of items and breaking it > into separate unordered lists. The css for doing is is pretty straight > forward. > > The good news, is that multi-column layout ( > http://www.w3.org/TR/css3-multicol/) is getting support ( > http://caniuse.com/#search=column-count) and we will hopefully be able to > use it soon. > > The first option in my codepen shows the column-count method (check your > browser support though) and the second is just the simple ul's with some > styling. It's not production ready, but it should give you a good idea of > what would need to be done. > > http://codepen.io/chrisrockwell/pen/JiGak > > > On Fri, Aug 30, 2013 at 9:16 PM, Chris Rockwell > <ch...@chrisrockwell.com>wrote: > >> Hey John, can you post your HTML? Are you open to adding wrappers or no? >> >> >> On Fri, Aug 30, 2013 at 8:58 PM, John A. Johnson >> <j...@coffeeonmars.com>wrote: >> >>> I have a 6-item menu which is inline at desktop sizes, but block at >>> mobile sizes. it works great, but at mobile, I'd like to have 2 columns of >>> 3 buttons to make better use of my vertical space. is there an easy way to >>> do this? can it even be done with css? >>> >>> thank you! >>> >>> John >>> >>> existing desktop css: >>> >>> nav ul li{ >>> display:inline; >>> line-height:50px; >>> font-size:80%; >>> margin:0 3% 0 3%; >>> } >>> >>> >>> >>> existing mobile css: >>> >>> nav ul li{ >>> background-color:gray; >>> border-radius:3px; >>> display:block; >>> width:97%; >>> line-height:45px; >>> font-size:100%; >>> font-weight:700; >>> margin:1% 0 0 0; >>> padding:0 0 0 3%; >>> } >>> ______________________________________________________________________ >>> css-discuss [css-d@lists.css-discuss.org] >>> http://www.css-discuss.org/mailman/listinfo/css-d >>> List wiki/FAQ -- http://css-discuss.incutio.com/ >>> List policies -- http://css-discuss.org/policies.html >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >>> >> >> >> >> -- >> Chris Rockwell >> > > > > -- > Chris Rockwell > -- Chris Rockwell ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
