Using CSS To Scale/Zoom Down The Entire Kanban Board Proportionately (Kanban Plugin)

Custom CSS & Theme Design
, ,
1

What & Why

i am currently using this following CSS snippet to scale/zoom down the entirety of the Kanban board on my mobile phone, so more things can fit into the screen at once and the board can become more usable as i can see more cards& lists without having to pan back and forth constantly - which was really painful

.kanban-plugin {
    transform: scale(0.5);
    transform-origin: top left;
    width: 200%;
    height: 200%;
    overflow: auto;
}

What I Have Achieved So Far

how it looks like statically on my phone now:

as an example, this is a motorcycle modification project that i am doing,
looks really neat, i can see much more at once than the default scaling level, and it is much easier to drag and drop cards without accidentally panning the screen and it goes so fast it instantly goes to the other side of the board

Problem & Question

Problem ID

how it looks like when i drag a card:

how it looks like when i drag a card (without annotation for better clarity):

Question

my question is: can someone enlighten me what is the correct CSS code to downscale the drag and drop container in Kanban Board view on mobile?

when i go into the inspection tool, i see that there is a div class named kanban-plugin_drag-container, as shown below:

IMG_6884

it seems like that the class for the d&d container is dynamically generated, if the is the case, how can i target it in my CSS snippet?
i have tried several ways, it doesn’t register

what im looking for is a consistent downscale of the d&d container to the overall board view, so that it is a proportionate downscale of everything overall

Kanban is a really neat and cleaver plugin that leverages the markdown syntax, thanks to @mgmeyers.

just have to make some tweaks here and there to make it fit perfectly into my system and workflow. with the help of people from this repo’s issue section, so far i have implemented these using CSS codes:

  • coloured lists
  • grid view
  • downscale (on mobile only)

what is your fav tweaks?

any input is appreciated

originally posted on GitHub as an Issue in mgmeyers/obsidian-kanban

2

I’ve started, but still requires some manual tweaks, to implement collapsible lanes. This allows me to focus on some of the lanes, which also allows for a little better experience on smaller screens.

I might write it up some time, but I would like for it to be a little cleaner first, and there are not enough hours in the day (at least not for me including all procrastination and lack of focus).

Regarding your other question it might hard to debug, but I reckon you might need to duplicate most of your CSS to that extra created div. However, it might be kind of a blind walk I’m afraid.

1 Like
3

Doesn’t collapsible lanes or exist in the plug-in?

You are correct, u/ViscousPotential helped me solved this on Reddit, it’s:

.kanban-plugin__drag-container .kanban-plugin__item-content-wrapper {
    transform-origin: top left;
    transform: scale(0.5);
    width: 200%;
}

.kanban-plugin__drag-container .kanban-plugin__markdown-preview-wrapper {
    width: 100% !important;
}

putting it here, in case other people encounter this issue in the future

4

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