How to stop text from moving away from position when resizing? - html

Question

I'm fairly new to coding, have been at it for a few hours for a month now. For the past few hours I've been stuck with the problem that can be seen in the two pictures I attached. I've tried searching for answers and various methods such as min-width, display:flex, adjusting the font-size from autoscaling with vw and using rem. I just want my text to stay inside of the laptop screen no matter what screen size I'm viewing it on. I know I could use the easy way and just photoshop the photo with the text but I want to learn how to do it with coding for future projects as well. I do want the picture to scale a bit so it can be viewed on for example a phone in an ok size. Can you help me please?
body {
margin: 0;
text-align: center;
}
h1 {
color: #66BFBF;
font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
font-size: 5vw;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-container {
background-color: #ccf2f4;
padding-top: 50px;
position: relative;
}
.laptop {
width: 50%;
height: 50%;
}
<section>
<div class="top-container">
<img class="laptop" src="img/laptop.png" alt="cloud-img">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Nhien</h1>
<h2 class="dreamer">just a gamer with big dreams.</h2>
</div>
</section>
You can also access the website from www.nhienweb.com

Answer 1

You should add the image to the background of the section or the div.
For this answer, I am adding it to the section background.
<section>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="cloud-img">
<h1>I'm Nhien</h1>
<h2 class="dreamer">just a gamer with big dreams.</h2>
</div>
</section>
In the HTML, I have removed the laptop img from html and will add it in the css. I will position the cloud as absolute.
And here is the css for this code
body {
margin: 0;
text-align: center;
}
h1 {
color: #66BFBF;
font-family: "Dancing Script", Verdana, Geneva, Tahoma, sans-serif;
font-size: 5vw;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-container {
background-color: #ccf2f4;
padding-top: 50px;
position: relative;
}
.top-cloud {
position: absolute;
top: 0;
left: 0;
/* Positioned it relative to the top-container */
}
section {
background-image: url([your path to img relative to the css file]);
background-size: cover;
/* bg size to cover makes it what you want gives it full width at any screen */
}
If this doesn't help comment and ask me.

Answer 2

I applied this code to the CSS so it is working now. Don't think that this is the correct way to solve the problem but it seems fine when I tested my website on my mobile. Thanks for your trouble and time!
#media (max-width: 591px){
h1{
top:30%;
}
}