Relative and absolute positioning problems-CodePudding

I am trying to position "Kipplo.co.uk" so it is central like the button and it works but I'm wanting the design responsive, so when the window is resized it the heading will adjust to but instead its appearing into the navigation bar. I have also attempted to use relative but the button already uses the function.

What i'm looking for: I'm wanting the Heading and the button to be in the same place in the middle of the page that also responds to the screen size.

(See attached image below)
Kindest regards!

https://i.stack.imgur.com/MFMpA.png

https://i.stack.imgur.com/EjjuF.png

body {

    background-color: rgb(10, 10, 10);
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

 /* Announcment bar */
.alert {
    padding: 20px;
    background-color: #2a7a85;
    color: white;
  }
  
  .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .closebtn:hover {
    color: black;
  }

  body {margin: 0;}
/* Navigation bar */
  ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(248, 248, 248);
  }
  
  ul.topnav li {float: left;}
  
  ul.topnav li a {
    display: block;
    color: black;
    text-align: center;
    font-weight: bold;
    padding: 25px 32px;
    text-decoration: none;
  }
  
  ul.topnav li a:hover:not(.active) {background-color: rgb(55, 81, 165);}
  
  ul.topnav li a.active {background-color: #0cc0d8;}
  
  ul.topnav li.right {float: right;}
      
  @media screen and (max-width: 600px) {
    ul.topnav li.right, 
    ul.topnav li {float: none;}
  }

  /* Services Section on product page */
.services {
  background: rgb(10, 10, 10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.services h1 {
  background-color: #77ff7e;
  background-image: linear-gradient(
    to right,
    #00eeff 0%,
    #0df1de 0%,
    #0ad3f7 21%,
    #2b86db 52%,
    #23a6da 78%,
    #06afda 100%
  );
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  margin-bottom: 5rem;
  font-size: 2.5rem;
}

.services__container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.services__card {
  margin: 1rem;
  height: 525px;
  width: 400px;
  border-radius: 4px;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(17, 17, 17, 0.6) 100%
    ),
    url('img/bus.PNG');
  background-size: cover;
  position: relative;
  color: #fff;
}

.services__card:before {
  opacity: 0.2;
}

.services__card:nth-child(2) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(17, 17, 17, 0.9) 100%
    ),
    url('img/bus.PNG');
}

.services__card h2 {
  position: absolute;
  top: 350px;
  left: 30px;
}

.services__card p {
  position: absolute;
  top: 400px;
  left: 30px;
}

.services__card button {
  color: #fff;
  padding: 10px 20px;
  border: none;
  outline: none;
  border-radius: 4px;
  background: #19b6bb;
  position: absolute;
  top: 440px;
  left: 30px;
  font-size: 1rem;
}

.services__card button:hover {
  cursor: pointer;
}

.services__card:hover {
  transform: scale(1.075);
  transition: 0.2s ease-in;
  cursor: pointer;
}

@media screen and (max-width: 960px) {
  .services {
    height: 1600px;
  }

  .services h1 {
    font-size: 2rem;
    margin-top: 12rem;
  }
}

@media screen and (max-width: 480px) {
  .services {
    height: 1400px;
  }

  .services h1 {
    font-size: 1.2rem;
  }

  .services__card {
    width: 300px;
  }
}



/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/* "not needed*/

 
 
 
 .textcontainer2{

  font-size: 2.5vh;
  color: whitesmoke;

  /* buttons */


}.main__btn {
  font-size: 1rem;
  background-image: linear-gradient(to top, #008cff 0%, #0e0bec 100%);
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.35s;
  outline: none;
  bottom: -400px;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -100px;
  margin-bottom: 400px;
  
}

.main__btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main__btn:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #4837ff;
  transition: all 0.35s;
  border-radius: 4px;
}

.main__btn:hover {
  color: #fff;
}

.main__btn:hover:after {
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/icon.png">

<link rel="stylesheet" href="styles.css">

<style>


h1{
  font-size: 60px;
margin:0;
padding:0;
text-align: center;
font-family: 'Courier New', Courier, monospace;
position:absolute ;
top: 50%;
left: 50%;
bottom: -80px;
margin-top: -50;
margin-left: -100;
margin-bottom: 80px;
transform: translate(-50%);
color: blue;
}





</style>
</head>
<body>

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <center><strong>DEALS NOW ON!</strong> Upto 30% discounts this christmas
</div></center>

<ul class="topnav">
    
<li><img src="img/logo.png"></li>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="Products.html">Products</a></li>
  <li><a href="#contact">Contact Us</a></li>
  <li class="right"><a href="#about">About Us</a></li>
</ul>


<h1> Kipplo.co.uk </h1>


<button class="main__btn"><a href="#">More Information</a></button>

    

</body>
</html>

CodePudding user response：

You can use

@media only screen and (min-height: 700px;) {
    h1 {
       bottom:10%;
    }
}

This selects the h1 in a @media query for less than 600px height, and makes the h1 10% from the bottom, read more about media queries here; https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

CodePudding user response：

you can use flex box to do that.

1.I wrapped all the elements in a div with class as container and added below properties

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

2.wrapped button and the h1 tag in div with class btn-centering with properties

.btn-centering {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

3.wrapped the h1 tag in a div with class text and property

.text {
    width: 100%;
}

and removed all those position properties.

body {
    background-color: rgb(10, 10, 10);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Announcment bar */
.alert {
    padding: 20px;
    background-color: #2a7a85;
    color: white;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

body {
    margin: 0;
}
/* Navigation bar */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(248, 248, 248);
}

ul.topnav li {
    float: left;
}

ul.topnav li a {
    display: block;
    color: black;
    text-align: center;
    font-weight: bold;
    padding: 25px 32px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
    background-color: rgb(55, 81, 165);
}

ul.topnav li a.active {
    background-color: #0cc0d8;
}

ul.topnav li.right {
    float: right;
}

@media screen and (max-width: 600px) {
    ul.topnav li.right,
    ul.topnav li {
        float: none;
    }
}

/* Services Section on product page */
.services {
    background: rgb(10, 10, 10);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.services h1 {
    background-color: #77ff7e;
    background-image: linear-gradient(
        to right,
        #00eeff 0%,
        #0df1de 0%,
        #0ad3f7 21%,
        #2b86db 52%,
        #23a6da 78%,
        #06afda 100%
    );
    background-size: 100%;

    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    margin-bottom: 5rem;
    font-size: 2.5rem;
}

.services__container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.services__card {
    margin: 1rem;
    height: 525px;
    width: 400px;
    border-radius: 4px;
    background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(17, 17, 17, 0.6) 100%
        ),
        url('img/bus.PNG');
    background-size: cover;
    position: relative;
    color: #fff;
}

.services__card:before {
    opacity: 0.2;
}

.services__card:nth-child(2) {
    background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(17, 17, 17, 0.9) 100%
        ),
        url('img/bus.PNG');
}

.services__card h2 {
    position: absolute;
    top: 350px;
    left: 30px;
}

.services__card p {
    position: absolute;
    top: 400px;
    left: 30px;
}

.services__card button {
    color: #fff;
    padding: 10px 20px;
    border: none;
    outline: none;
    border-radius: 4px;
    background: #19b6bb;
    position: absolute;
    top: 440px;
    left: 30px;
    font-size: 1rem;
}

.services__card button:hover {
    cursor: pointer;
}

.services__card:hover {
    transform: scale(1.075);
    transition: 0.2s ease-in;
    cursor: pointer;
}

@media screen and (max-width: 960px) {
    .services {
        height: 1600px;
    }

    .services h1 {
        font-size: 2rem;
        margin-top: 12rem;
    }
}

@media screen and (max-width: 480px) {
    .services {
        height: 1400px;
    }

    .services h1 {
        font-size: 1.2rem;
    }

    .services__card {
        width: 300px;
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .text {
        font-size: 11px;
    }
}

/* "not needed*/

.textcontainer2 {
    font-size: 2.5vh;
    color: whitesmoke;

    /* buttons */
}
.main__btn {
    font-size: 1rem;
    background-image: linear-gradient(to top, #008cff 0%, #0e0bec 100%);
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: all 0.35s;
    outline: none;
}

.main__btn a {
    position: relative;
    z-index: 2;
    color: #fff;
    text-decoration: none;
}

.main__btn:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #4837ff;
    transition: all 0.35s;
    border-radius: 4px;
}

.main__btn:hover {
    color: #fff;
}

.main__btn:hover:after {
    width: 100%;
}

h1 {
    font-size: 60px;
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    color: blue;
    word-wrap: break-word;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.btn-centering {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.text {
    width: 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="img/icon.png" />

        <link rel="stylesheet" href="stack_overflow1.css" />
    </head>
    <body>
        <div class="container">
            <div class="alert">
                <span
                    class="closebtn"
                    onclick="this.parentElement.style.display='none';"
                    >&times;</span
                >
                <center>
                    <strong>DEALS NOW ON!</strong> Upto 30% discounts this
                    christmas
                </center>
            </div>

            <ul class="topnav">
                <li><img src="img/logo.png" /></li>
                <li><a class="active" href="index.html">Home</a></li>
                <li><a href="Products.html">Products</a></li>
                <li><a href="#contact">Contact Us</a></li>
                <li class="right"><a href="#about">About Us</a></li>
            </ul>

            <div class="btn-centering">
                <div class="text"><h1>Kipplo.co.uk</h1></div>
                <button class="main__btn">
                    <a href="#">More Information</a>
                </button>
            </div>
        </div>
    </body>
</html>