Responsive header with text and button

Question

I am making a simple header with text and a button but when I go on mobile everything isn't responsive . I tried using %'s but nothing was working. And my CSS jumps up and down when I scroll on mobile. This is the codepen, https://codepen.io/Religion/pen/ZEQerQZ. Below is the CSS . HTML you can check on the codepen due to the post saying it's mostly code. CSS:

@media only screen and (max-width: 767px) {
.header1{
  padding: 15%;
  text-align: center;

  background-image: url('https://manchesterdental.org/img/dentalimg/welcomenote.jpg');
   background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 30px;
  position: relative;

}
.header-text1 h2{
  margin-top:20%;
  font-size:1.8rem;
  width:45vh; 
  margin-left:-20%;
  color:white;



 
}
.header-text1 p{
 
    font-size:1.1rem;
  width:44vh; 
  margin-left:-20%;
  padding-top:40px;
  color:white;
  font-weight: 500;



}
.header-text{
   position: absolute;
   bottom:0;
   left:0;

   
   
   width:1px;



}
.button {
  background-color: #00aeef; /* Green */
  
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  margin-left: 2%;
  width:95%;
  margin-bottom: 20px;
  
}
}

@media (min-width:900px) {
  .header1{
  padding: 60px;
  text-align: center;

  background-image: url("{% static 'dentist/img/bg-img/header.jpg' %}");
   background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  font-size: 30px;
  height:80vh;
 
}
.header-text1 h2{
  margin-top:10%;
  color:white;
font-size: 3rem;


 
}
.header-text1 p{
 padding-top:40px;
 font-size:1.5rem;
 max-width:80%;
 margin-left:10%;
 
 
  color:white;
  font-weight: 500;



}
.button {
  background-color: #00aeef; /* Green */
  
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  margin-left: 2%;
  width:45%;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-weight:800;

  
}
}

HTML:

<div class="header1">
  <div class = "header-text1">
  <h2>We Believe Everyone Should Have Easy Access To Great Dental Care</h2>
  <p >As a leading industry innovater, * Dental Business* is opening up exciting new opportunities for dental professionals, investors, employees & suppliers. Contact us to find out what we have to offer you.</p>
  <br>
 <a href="{% url 'contact' %}"><button class="button button1">Contact Us!</button></a>

  </div>
</div>

Answer 1

To keep the text elements centered in the div, you can make use of flexbox. Simply add the following code to the top of your CSS file before the media queries:

.header-text1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
 
  width: 100%;

}

Also, no need to include this with your media queries since flexbox will handle everything regardless of viewport size.

This Codepen had the updated code - also changed the second media query so that the CSS doesn't break between 767px and 900px like it did before.