section overlap in moblie mode css - html

Question

I'm new to HTML and CSS and I'm trying to design a website from some source code that I found.
When I open the page on the web, It shows as follows:
When I open this page of a mobile device it appears as follows:
When on a mobile device, the section of Download the app overlaps the phone image that I added.
How can I make sure that the whole blue section will be below the image?
The parts of the .css that I found relevant are:
.home-image-right {
display: block;
position: absolute;
right: 0;
top: 55%;
-webkit-transform: translateY(-68%);
-ms-transform: translateY(-68%);
transform: translateY(-68%);
padding-top: 21rem;
z-index: 500;
width: 50%;
text-align: right;
}
.home-image-right img {
vertical-align: bottom;
width: 75%;
}
#download {
background: #2c80c4;
color: #ffffff;
padding-top: 12rem;
padding-bottom: 12rem;
text-align: center;
}
#download h1 {
color: #ffffff;
}
#download h1::before {
background-color: #ffffff;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#download .lead {
color: #ffffff;
margin-top: 4.8rem;
}
#download .row {
max-width: 800px;
}
#download .download-badges {
list-style: none;
margin: 0;
text-align: center;
}
#download .download-badges li {
display: inline-block;
margin: 0 7.5px;
padding-left: 0;
}
#download .download-badges li a {
display: block;
width: 230px;
height: 71px;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 230px 71px;
}
<div class="overlay"></div>
<div class="home-content">
<div class="row contents">
<div class="home-content-left">
<img src="images/logo.png" srcset="images/logo.png 1x" data-aos="fade-up">
<h1 data-aos="fade-up">
....
</h1>
<div class="buttons" data-aos="fade-up">
<a href="#download" class="smoothscroll button stroke">
<span class="icon-circle-down" aria-hidden="true"></span> Download App
</a>
</div>
</div>
<div class="home-image-right">
<img src="images/screen.png" srcset="images/screen.png 1x" data-aos="fade-up">
</div>
</div>
</div>
<!-- end home-content -->
<div class="home-scrolldown">
<a href="#about" class="scroll-icon smoothscroll">
<span>Scroll Down</span>
<i class="icon-arrow-right" aria-hidden="true"></i>
</a>
</div>
</section>
<!-- end home -->
<!-- download
================================================== -->
<section id="download">
<div class="row">
<div class="col-full">
<h1 class="intro-header" data-aos="fade-up">Download Our App Today!</h1>
<ul class="download-badges">
<li>Play Store</li>
</ul>
</div>
</div>
</section>
<!-- end download -->
Thank you

Answer 1

you may style your website with two specific css coding one is for desktop view and other one is for mobile view you want to use this media tag and write your css for mobile view into this
you may change the max-with value since 1px
it make if your device width is smaller than 600px it change the background-color to light blue
#media only screen and(max-width: 600px){
body{
background-color:light blue;
}
}
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Answer 2

Hmm that´s hard to say, without knowing where the image is. But i think this is your problem:
.home-image-right {
display: block;
position: absolute;
right: 0;
top: 55%;
-webkit-transform: translateY(-68%);
-ms-transform: translateY(-68%);
transform: translateY(-68%);
padding-top: 21rem;
z-index: 500;
width: 50%;
text-align: right;
}
position: absolute.
When assigning a position, you take out this section from the flow.
Take a look here: https://www.w3schools.com/css/css_positioning.asp