# CSS: Quickchart Progress bar over Card layout

**URL:** <https://community.glideapps.com/t/css-quickchart-progress-bar-over-card-layout/36410>\
**Category:** Ask for Help\
**Tags:** custom-code\
**Created:** [December 28, 2021, 1:08am UTC](https://community.glideapps.com/t/css-quickchart-progress-bar-over-card-layout/36410 "2021-12-28T01:08:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [December 28, 2021, 1:08am UTC](https://community.glideapps.com/t/css-quickchart-progress-bar-over-card-layout/36410/1 "2021-12-28T01:08:51Z")

</div>

![Screen Shot 2021-12-27 at 7.51.06 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/e/1ee22d8ce7e2174ec074d6666b05dc044bb4b137.png)

Example quickchart image:

```auto
![](upload://yLyY3ei3ExF3eOUJaKmBdN1zJem.png)

```

 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f3aa56061fe354b610e7dba9d29aa5516f241fc6.png)

```auto
<pre><span><style>
.card-image-container, .card-image-container .image {
height: 10px !important;
padding-bottom: 0 !important;
}

/* Use this for progress bar on the bottom
[data-test="card-item"] {
flex-direction: column-reverse;
}*/

```

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [December 28, 2021, 2:05am UTC](https://community.glideapps.com/t/css-quickchart-progress-bar-over-card-layout/36410/2 "2021-12-28T02:05:12Z")

</div>

Beautiful.

Bob, are you becoming a pro at css by any chance? 😆

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [December 28, 2021, 2:15am UTC](https://community.glideapps.com/t/css-quickchart-progress-bar-over-card-layout/36410/3 "2021-12-28T02:15:52Z")

</div>

I dunno about _pro_, but I know enough to be dangerous 😉