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

Ask for Help
1

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

<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;
}
2 Likes
2

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.

3

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

2 Likes
4

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

2 Likes
5

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

6

Getting warmer?

1 Like
7

Here’s my try with a different approach.

image
image1920×1427 119 KB

image
image1920×1025 90.3 KB 

<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.

8

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

1 Like