CSS position relative div not responsive - html

Question

Hello i have a background which i want to add div over it like this picture
im using bulma css framework
i was able to achive this look by writing this code
index.html
<div class="section newsletter">
<figure class="image">
<img src="src/img/newsletter.png">
</figure>
<div class="form">
<h5>Keep updated with out latest news.<br>Subscribe to our newsletter</h5>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Enter Your Email">
</div>
<div class="control">
<a type="button" class="button btn-grad is-dark">
Subscribe
</a>
</div>
</div>
</div>
</div>
css
.newsletter{
padding:0px;
.form{
display: flex;
flex-direction: column;
width:588px;
height:297px;
background: $bg-transperant;
box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
border-radius: 16px;
// Layout
position: relative;
left: 140px;
top: -386px;
h5{
padding: 50px 60px 40px 60px;
font-weight: 600;
font-size: 25px;
line-height: 46px;
color: #2F4B6E;
}
div{
justify-content: center;
}
.input{
height: 50px;
width: 352px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
}
}
}
the problem is that itsn't responsive in mobile or tablet
it looks like this
im using position relative to able to put the div on the top of the image
how can i do it better for example to make it responsive ?
also there is a large white space below the picture i don't know why
Live Project Repo https://github.com/Ov3rControl/ReachGate
Live Overview: https://ov3rcontrol.github.io/ReachGate/

Answer 1

This may be 3 problems combined.
1) Ensure that you have your viewport set to responsive in the head
2) Don't use hard-coded dimensions for containers that expand beyond the smallest possible viewport. Notice your form is set to a 588px width. Try doing width: auto; and then max-width: 588px; instead.
3) Consider not hard-coding your positioning. Try something like this instead to center relatively positioned containers.
Looking really pretty though, good job! One aside: It's considered good practice to always tie a label to an input for accessibility purposes. If you don't want it visible that's fine! See this
I did the following to responsively center the form:
<!------------------------------------[NewsLetter Section - START]------------------------------------------->
<div class="section newsletter">
<div class="form">
<h5>Keep updated with our latest news.<br>Subscribe to our newsletter</h5>
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Enter Your Email">
</div>
<div class="control">
<a type="button" class="button btn-grad is-dark">
Subscribe
</a>
</div>
</div>
</div>
</div>
<!------------------------------------[NewsLetter Section - END]------------------------------------------->
.newsletter {
padding: 0px;
background-image: url('src/img/newsletter.png');
height: 400px;
display: flex;
align-items: center;
justify-content: center;
.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-height: 270px;
max-width: 320px;
background: $bg-transperant;
box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
border-radius: 16px;
// Layout
h5 {
padding: 50px 60px 40px 60px;
font-weight: 600;
font-size: 25px;
line-height: 46px;
color: #2f4b6e;
}
div {
justify-content: center;
}
.input {
height: auto;
height: 50px;
width: 352px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
border-bottom-left-radius: 100px;
border-top-left-radius: 100px;
}
}
}