Responsive header with text and button

user_13561605 0
Viewed 767

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>

enter image description here

responsive css html
2 Answers

You are currently setting the margin-top property to 20% of the height of the button itself.

If you want the margin to respond to the width of the viewport, then use something like:

margin-top: 2vw; // 2% of the viewport width

However, for the margin-top property, I suggest using the height of the viewport like so:

margin-top: 1vh; // 1% of the viewport height (1% should be enough)
user_50572780

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.

user_137843180
Related