# Need some CSS Help: Card Caption in top left corner under image

**URL:** <https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736>\
**Category:** Ask for Help\
**Created:** [October 7, 2021, 12:20am UTC](https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736 "2021-10-07T00:20:55Z")\
**Posts on this page:** 8\
**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:** [October 7, 2021, 12:20am UTC](https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736/1 "2021-10-07T00:20:55Z")

</div>

> **[Robert's App · Glide](https://www.loom.com/share/5cee97a8fbde4fc79d8d5d993fe44169)**

This comes close, but doesn’t work in tablet mode or if phone is rotated:

```auto
<pre><span><style>
.bottom-left-overlay .floating-overlay-text {
margin-top: 10px;
overflow: visible !important;
white-space: pre-wrap !important;
}

.bottom-right-overlay [data-test="app-avatar-text"] {
position: absolute;
right: 10px !important;
top: 240px;
}

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 7, 2021, 12:52am UTC](https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736/2 "2021-10-07T00:52:51Z")

</div>

I was thinking if you’re willing to use XC to determine if the user is on desktop or not you can use 2 different rich text components to determine the height, but let me try with one CSS.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 7, 2021, 1:24am UTC](https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736/3 "2021-10-07T01:24:39Z")

</div>

Have you tried any of the other measurements beside px and %?

> **[The Lengths of CSS](https://css-tricks.com/the-lengths-of-css/)**
>
> There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding,

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 7, 2021, 1:26am UTC](https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736/4 "2021-10-07T01:26:01Z")

</div>

Little update: I’m trying on my version with em/vh but hasn’t come to any results. These have always been tricky.

---

<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:** [October 7, 2021, 1:41am UTC](https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736/5 "2021-10-07T01:41:52Z")

</div>

XC is so finicky though. I haven’t been able to reliably use it in production.

---

<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:** [October 7, 2021, 1:49am UTC](https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736/6 "2021-10-07T01:49:15Z")

</div>

Getting warmer?

> **[Robert's App · Glide](https://www.loom.com/share/98a14ccdcee7433086b821a4951dc46b)**

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 7, 2021, 1:53am UTC](https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736/7 "2021-10-07T01:53:14Z")

</div>

Here’s my try with a different approach.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/e/8e54a7bab092d372d9b08733dc0c1801ea14b6e6.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/4/742ed8b0ae44f229c7887b11699182f738009aec.jpeg)

```auto
<pre><span><style>

.bottom-left-overlay .floating-overlay-text {
margin-top: 10px;
overflow: visible !important;
white-space: pre-wrap !important;
}

[data-test="card-item"] .card-footer > :first-child:not(:last-child) {
margin-right: 20px;
}

.bottom-right-overlay [data-test="app-avatar-text"] {
margin-top: 10px;
white-space: break-spaces;
text-align: right;
min-width: 40px;
}

```

Basically more room to breathe for the caption.

---

<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:** [October 7, 2021, 1:57am UTC](https://community.glideapps.com/t/need-some-css-help-card-caption-in-top-left-corner-under-image/32736/8 "2021-10-07T01:57:46Z")

</div>

Hmm…ya…easier to implement but leaves a lot of white space in the top right corner of the card footer.