Ensure cards don't reserve space for an image if none is attached - Tiny CSS Hack (advanced)

Showcase Tips and Hacks
1

In short, a tiny CSS change to allow cards both with and without images to exist that fixes the cards without images claiming a lot of unnecessary space. E.g.:

image
image.png439×570 33.1 KB

As opposed to:

image
image.png436×814 34.2 KB

  1. Install a javascript injection plugin for Chrome. E.g.: “User JavaScript and CSS”
    a. Setup Arrive-js as a library: https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.js
  2. Setup CSS: https://gist.github.com/gjroelofs/9887cdccc0518f3637ef0a005171b313

When using the mentioned Chrome plugin, make sure to set it up as follows:

image

And that the domain is setup correctly to: https://coda.io/d.

Known issues:

  • None

Changelog:

  • 31/10/'19 - Initial post
4 Likes
2

I would consider this a bug, but thanks for sharing a temporary solution.