Questions tagged [column-count]

The column-count CSS property describes the number of columns in an element.

The column-count CSS property describes the number of columns in an element.

Further Reading

129 questions
1
vote
0 answers

Second column is the tallest instead of the first one when using column-count

The second column seems to be filled first/to be the tallest, at least on certain screen sizes (as seen here). How can I make sure the first column is filled in first and and the second column last (as it would make sense in the English language,…
elisa
  • 53
  • 1
  • 7
1
vote
2 answers

CSS Change Columns from 1 to 2

In mobile view, footer navigation menu displays in 1 column at https://wordl.io Need help changing 1 column to 2 columns in footer navigation menu. Tried css below but does not work. .gh-foot-menu .nav {column-count:2;}
CountryMusic
  • 115
  • 1
  • 6
1
vote
1 answer

Pseudo class with column count not working in the safari browser

Pseudo class with column count not working in the safari browser. I have two screenshots. 1. Firefox browser screenshot 2. Sarari browser screenshot You can check in the screenshot, The first one screenshot is working in with columns count but in…
user9437856
  • 2,360
  • 2
  • 33
  • 92
1
vote
1 answer

Using column-count causes flex div to split the element in half

When using column-count with nested divs that have display: flex set I end up with elements that get cut in half. According to this answer I should use display: inline-block to prevent this from happening. However, when I do that I end up with…
maxshuty
  • 9,708
  • 13
  • 64
  • 77
1
vote
1 answer

3 and higher columnCount cause bug Android Studio

When objects do not fit in three lines, they go beyond, and I need that if there are too many of them they passed to the next row. Is it possible way to fix it? Thanks. columnCount is 2 columnCount is 3 and higher
1
vote
1 answer

Count number of columns with TRUE in data frame

I am trying to count the number of columns that contain the word "TRUE" in every row of a data frame and then place that number in a new column of that data frame. For example, how do I go from this A B C D E F H …
1
vote
0 answers

Weird behaviour Safari with Column-count

I have a container that contains several (eg. 6) facets. These facets are checkboxes that are styled. I use CSS column-count to create three columns. On all browsers it shows as intended. But in safari only the (styled) checkboxes in the first…
Jeroen
  • 307
  • 1
  • 6
  • 17
1
vote
1 answer

Column count element overlaps to next column

.main{ column-count: 2; } .main .list{ background: #ccc; padding: 10px; list-style-type: none; } .main .list:hover{ background: #11e; }
1
vote
2 answers

unwanted hover effect on next column

Place the mouse on third lorem ipsum and you'll see an unwanted hover effect on the next column. How to avoid this? .footer{ column-count:2; background:#006790; padding:9px 14px; } .link{ display:block; padding:4px 10px; …
qadenza
  • 9,025
  • 18
  • 73
  • 126
1
vote
1 answer

column-count does not work within a fieldst in chrome

Has anyone noticed that fieldset tags do not support column-count or flex styling in Chrome? Does anyone know a workaround? Unfortunately this is created in an environment I cannot control. So, I can't change the HTML.
Gregg
  • 33
  • 4
1
vote
1 answer

Column-Count Height Issue between Elements

I am having an issue with the column-count CSS property. I am using it along with media queries to make my pagesmore dynamic when going to mobile. However I am having the issue of a large gap between my forms. At the moment I am hard coding a height…
1
vote
1 answer

Img "flicking" with column-count

I have a display bug in the gallery on my website with Google Chrome and Safari. With column-count I create 3 columns. But the first image shown in column 2 and 3 is not displayed correctly. When I hover-over the image a kind of "flickering" arises.…
Kai
  • 11
  • 4
1
vote
0 answers

Why is column-count rendering thin lines in Chrome on 4K screens?

I have found an odd rendering issue in Chrome when it deals with the column-count property on high resolution screens. I am seeing this on a 4K screen. body { background-color: #30271d; font-family: arial, sans-serif; …
1
vote
1 answer

CSS column-count works but wish to control where it breaks the column

I use a WordPress plugin called Event List which lists events (with text and pictures) on any page with the help of a shortcode - [event-list]. The list is displayed in a long row and I've been struggling to try and make it display in columns. Asked…
danniee
  • 29
  • 5
1
vote
3 answers

column-count not splitting on short columns in Chrome

EDIT: I've removed the
tags that several people pointed out may be causing the issue and recreated the same layout with more correct CSS, which I've included below (using width:100% on the labels instead of a break), but am still getting the…
Sinister Beard
  • 3,570
  • 12
  • 59
  • 95
1 2 3
8 9