Column count

HTML & CSS
1

For a website I have created a mega menu. containing about 50 categories. I use column-count in order to devide the categories over the dropdown menu
cSS

.column-count {
	-webkit-column-count: 5;
	   -moz-column-count: 5; 
	        column-count: 5;
}

HTML

<ul class="column-count">

This is workg great from on laptop and up but on smaller devices the columns start to overlap eachother. What can I do to avoid that?

Edit: when using column-count and column-width on an article or div when the screen becomes to small for the number of columns the remaining columns will wrap below the other columns but with the dropdow that isn’t happening

2

Hi there donboe,

this is where @media will come to your rescue. :biggrin:

Here is an example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.list {
    column-count: 5;
 }

@media ( max-width: 48em ) {
.list {
    column-count: 4;
  }
 }

@media ( max-width: 40em ) {
.list {
    column-count: 3;
  }
 }

@media ( max-width: 32em ) {
.list {
    column-count: 2;
  }
 }

@media ( max-width: 24em ) {
.list {
    column-count: 1;
  }
 }
</style>

</head>
<body> 

 <ol class="list">
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
 </ol>

</body>
</html>

coothead

2 Likes
3

@coothead. Thank you for the reply. That’s what I did. Not with as many breakpoints as you did, just with one to test but it didn’t give me the desired result. Maybe I need to clear the cashe. I will try that and keep you informed

4

Hi @coothead. I cleared the cache and now it’s working indeed. I was to quick with my conclusion. Thanks for the input :+1:

5

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

6

Another approach to CSS columns which I like to use is to set a column-width.
This can avoid the need for all those @queries.
Shorthand syntax can set the (max) column count and width in one go.

.list {
   columns: 5 10em ;
}

This will give you 5 columns where space allows. But as space reduces, if the columns get squeezed any smaller than the (10em) width you set, it will automatically drop the column count to 4, then 3 and so on…

5 Likes
7

@SamA74. Thank you for the reply. I had it like that before the suggestion from @coothead and before clearing the cache. For now I’m done but I will give that approach another try tommorow. I will keep you updated. Again thanx a lot

8

So the problem is specific to the list being in a drop-down menu.
We would have to see a full “working” example to diagnose it.

9

Yes it is. But the media query approach, as suggested by @coothead, wasn’t working in the first place either untill I cleared the cache, after which it worked. I’m sure that in the same way the column-width should work as well. I will post the result after I have tested it tomorrow

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.