CSS to make catlist look good on mobile?

[gabuzom]

Hello there and thanks for the very useful plugin!

Apparently, on mobile devices the lists appear like if they were very much zoomed, which for multi-column looks very weird and hard to read.. Does anyone know of a right CSS "patch" that would make it look OK on mobile browsers? Maybe making the columns independant floats: or something like this?

Thanks!

[xif-fr]

Hi, could you send a screenshot ? I don't have mobile devices to test.

[WebFreak001]

here is a style I made which is quite hacky though:

@media screen and (max-width: 1000px) {
  .catlist_columns[style*="column-count:"] {
    padding-left: 0;
  }
}

@media screen and (max-width: 600px) {
  .catlist_columns[style*="column-count:"] {
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    column-count: 1 !important;
  }
}

the top block removes some padding on the left (so the list items are basically right on the edge of the content) on smaller screens

the bottom block forces all multi-column catlists to be single-column on screens 600px or narrower. (in my pages I use at most 3 columns, which I think is the last one that looks ok at this size)

This CSS must be in a CSS file and can't be assigned through attributes, so you can make it a part of your custom CSS changes, see https://www.dokuwiki.org/faq:css

[xif-fr]

Do you want to make a pull request ?

[WebFreak001]

no I think this is not a good solution for general use, it's a solution that only works well if you have stuff you want to rewrap into single columns.

It would be better to offer some responsive column modes (like desktop-6-tablet-4-mobile-2) that change column count depending on resolution. This would require this plugin to include a CSS file though, I don't know if that's doable so easily inside dokuwiki plugins.

[xif-fr]

It does : https://github.com/xif-fr/dokuwiki-plugin-catlist/blob/master/style.css