Position Text to Stay in bottom right corner - html

Question

I am trying to make the text stay in the bottom right corner, but once I change the window height or width, it goes out of the curve (shown here)
I tried positioning it with percentages, vw, vh, em and it still goes out of the curve when the screen size is changed.
Any idea on how to position this so it always stays inside that curve no matter the size of the screen?
Here is the code:
.phone-number {
position: absolute;
bottom: 20vh;
right: 5vh;
color: #472d23;
font-weight: 600;
font-size: 3vh;
}
.landing-page {
background: url("../img/bg2.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-position: center;
position: relative;
overflow: hidden;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.curve {
background: url("../img/Curve.png");
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 100vh;
}
<div class="row">
<div id="carasoul" class="landing-page">
<div class="curve">
<div class="container">
<h3 class="phone-number">[phone]</h3>
</div>
</div>
</div>
</div>

Answer 1

Try this. In HTML, add:
<div class="numBox">
<p class="num">Your number or your stuff</p>
</div>
In CSS, add:
.numBox
{position:relative;}
.num
{position:absolute; bottom:0; right:0;}

Answer 2

Try the following to set the text to fixed location relative to the bottom right corner:
.phone-number {
position: absolute;
bottom: 5px;
right: 5px;
color: #472d23;
font-weight: 600;
font-size: 3vh;
}

Answer 3

Wu. I think I my have a solution for you.
I think you will need a combination of things. Here goes...
First, I think you will need to set your position to relative.
Second, you will need to use a "transform: translate;" setting in your css, but use whatever percentages that you used before to keep the text where you wanted it. You would put those "y" and "x" percentages in the "translate" part of the css code.
Why do I think this would this work?
When you are creating a fullscreen video background for a webpage (or any kind of background for that matter), it is pretty common practice to use the "transform: translate" aspect of code to help insure that the background stays centered no matter what.
And if you think about it, what you're telling the CSS to do is to animate the item into the position you're telling it to be in, no matter the condition or size of the browser.
Using that concept, "transform: translate" should work no matter what position on the screen you want an item to have, whether it is to be centered or not. A really experienced engineer told me a few months ago that all engineering (coding included) is all about understanding CONCEPTS, because no two situations will call for the precise same answer. So the secret to learning is to learn how to adapt and apply concepts.
Sorry... tangent!
Anyway, I think that approach will work, even if I can't supply you exact code.
One more thing...
If "position: relative" doesn't work with what I told you, try "position: absolute".
I hope that helps!