I have a background image on my surveys and the end message text is getting lost. I'm trying to put a background behind it like I have with other headers, but I can't figure out the css container for it. CSS below is what I have tried so far that haven't worked. I've attached a screenshot of the highlighted text.


.completed-wrapper .p {
background: rgba(200, 205, 210, 0.72);
border-radius: 25px;
padding: 10px;
}

.completed-text .p {
background: rgba(200, 205, 210, 0.72);
border-radius: 25px;
padding: 10px;
}


Also, I've attached a screenshot of previous headers. Can you help make this dynamic to the size of the text itself or is it always going to make it as wide as the container?




Thanks

Hi,
I created the end message accordingly:
<div style="background: rgba(200, 205, 210, 0.72);border-radius: 25px;padding: 10px;">
First line<br />
Second line
</div>



Joffm

Oh you put a div right in the text element. Is there a way to put it in css at the theme level so I can keep it running if I copy the theme I have to make a new one? Or if I make a new survey and forget about the div?

Is there a way to put it in css at the theme level

I think you saw that this phrase is just a <p> element.
And each line is a new <p> element.

But you may try to adapt the "submit.twig" around line 39.

Or if I make a new survey and forget about the div?

This is an Alzheimer issue.
But what? You see it in your first test run.

I've overridden .group-title and h3 on .token-page, why would this be any different? <p> should wrap based on media width just fine so putting a box around it shouldn't change anything, I'm guessing the padding would force it wider if text goes beyond a single line, or am I completely missing how that works?

I already have finished 2 surveys not knowing about the issue with end messages just being text that blends into the background and I'm working on a 3rd with more to come, as well as all of them mostly being annually done. It's going to be forgotten so having it set in the theme template is very much ideal.

I think we both were confused because of the message in a not activated survey.

But this is not displayed in an activated one.

So ".completed-text" is the class you need.