Bollate

HTML

[ANSWERED] php – Input tags & buttons not staying in a fixed position within div class

By

Nov 20, 2022 , ,

Solution 1 :

top: 50px; will not work unless you specify position manually. Similarly there are quite simple modifications to be done in the code.Learn more about CSS position property. Be more specific with Media Queries.
Try position: fixed to make the buttons stay in a fixed position.
Learn more about Media Queries.

Problem :

I’m making this chat page for me and my friends at school and am encountering this issue where when I resize my window to test different resolutions as I have my pc at home (1920×1080) Chromebooks at school which are 1400 wide and then my phone which is 500 wide.

I’m struggling to get my buttons fixed in the top right of the chat-box when resizing window and the chat-input box moves up and down when readjusting the window whereas i want it to be fixed below the chat box in the center.

Here is my code:

@import url(https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap);

/* ===============================
            MAIN SHIT
================================== */

textarea {
  top: 50px;
  height: 350px;
  resize: none;
  border: 3px solid black;
  padding: 5px;
  font-family: Tahoma, sans-serif;
}

body {
  margin: 0;
  background: rgb(195, 55, 100);
  background: linear-gradient(137deg, rgba(195, 55, 100, 1) 29%, rgba(114, 47, 106, 1) 53%, rgba(29, 38, 113, 1) 100%);
}

input {
  background-color: #27292E;
  color: white;
  border-radius: 5px;
  border-width: 1px;
  border: 2px solid #5f5f5f;
  font-family: "Roboto", sans-serif;
  width: 70%;
  margin: 0px 0px 5px;
  padding: 5px;
  font-size: 13px;
  height: 40px;
}

input[type="text"],
input[type="password"] {
  border: 2px solid #AAAAAA;
  margin: .5em 0 2em 0;
  max-width: 100%;
  outline: none;
  height: 3.5em;
  padding: 1em;
  width: 70%;
}

#masthead-index {
  height: 350px;
}

input {
  width: 150px;
  margin: 0px 5px;
}

.button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 20px;
  border: none;
  width: 50%;
}

body {
  font-family: 'Roboto', sans-serif;
  color: white;
  background-size: auto;
  background-repeat: repeat-y;
  background-attachment: fixed;
}

img {
  max-width: 900px;
  max-height: 400px;
}


/*  CHAT */

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.message_title {
  color: white;
  font-size: 25px;
}

.message_small {
  color: #353b48;
  font-size: 15px;
}


/* ===============================
         FOR MY PC (1920x1080)
================================== */

@media screen and (min-width: 1450px) {
  .chat-box {
    position: fixed;
    margin-top: 25%;
    margin-left: 5%;
  }
  .chatButtons {
    color: white;
    font-size: 15px;
    top: 31%;
    padding: 10px 20px;
    margin: 0px 10px;
    position: fixed;
    margin-left: 51%;
  }
  .content-page {
    top: 30%;
    overflow: scroll;
    overflow-x: hidden;
    border-radius: 10px;
    width: 70%;
    height: 500px;
    padding: 15px 20px;
    margin: auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    text-align: left;
    position: absolute;
    right: 0;
    left: 0;
    background-color: #0E283F;
    /*  background-color: rgba(64,115,158, 1); */
  }
}


/* ===============================
    IPHONE (7 plus - my phone)
================================== */

@media screen and (max-width: 800px) {
  .content-page {
    top: 35%;
    overflow: scroll;
    overflow-x: hidden;
    border-radius: 10px;
    width: 90%;
    height: 500px;
    padding: 10px;
    margin: auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    text-align: left;
    position: absolute;
    right: 0;
    left: 0;
    background-color: #0E283F;
  }
  #chatbox {
    font-size: 20px;
  }
  .chatButtons {
    display: none;
  }
  .chat-box {
    margin-top: 78%;
  }
}


/* ===============================
         chrome book
================================== */

@media screen and (max-width: 1450px) {
  .content-page {
    top: 38%;
    overflow: scroll;
    overflow-x: hidden;
    border-radius: 10px;
    width: 70%;
    height: 350px;
    padding: 10px;
    margin: auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    text-align: left;
    position: absolute;
    right: 0;
    left: 0;
    background-color: #0E283F;
    /*  background-color: rgba(64,115,158, 1); */
  }
  .chat-box {
    margin-top: 36%;
    padding: 0px;
    margin-left: 6%;
    margin-bottom: 0px;
  }
  .chatButtons {
    color: white;
    font-size: 15px;
    top: 10%;
    padding: 10px 20px;
    margin: 0px 10px;
    margin-left: 40%;
  }
}


/* OTHER STUFF */

.center,
#masthead .inner,
#masthead-index .inner,
#masthead-contact .inner,
#masthead-website_hosting .inner,
#masthead-minecraft_hosting .inner,
#masthead #pricing-plans,
#masthead-index #pricing-plans,
#masthead-contact #pricing-plans,
#masthead-website_hosting #pricing-plans,
#masthead-minecraft_hosting #pricing-plans,
#masthead #minecraft-pricing-plans,
#masthead-index #minecraft-pricing-plans,
#masthead-contact #minecraft-pricing-plans,
#masthead-website_hosting #minecraft-pricing-plans,
#masthead-minecraft_hosting #minecraft-pricing-plans,
#masthead #dedicated-pricing-plans,
#masthead-index #dedicated-pricing-plans,
#masthead-contact #dedicated-pricing-plans,
#masthead-website_hosting #dedicated-pricing-plans,
#masthead-minecraft_hosting #dedicated-pricing-plans {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: relative;
  left: 50%;
  top: 50%;
}


/* ===========================================
                Masthead
============================================ */

#masthead,
#masthead-index,
#masthead-contact,
#masthead-website_hosting,
#masthead-minecraft_hosting {
  margin-top: -122px;
  height: 340px;
  z-index: -999;
}

#masthead .inner,
#masthead-index .inner,
#masthead-contact .inner,
#masthead-website_hosting .inner,
#masthead-minecraft_hosting .inner,
#masthead #pricing-plans,
#masthead-index #pricing-plans,
#masthead-contact #pricing-plans,
#masthead-website_hosting #pricing-plans,
#masthead-minecraft_hosting #pricing-plans,
#masthead #minecraft-pricing-plans,
#masthead-index #minecraft-pricing-plans,
#masthead-contact #minecraft-pricing-plans,
#masthead-website_hosting #minecraft-pricing-plans,
#masthead-minecraft_hosting #minecraft-pricing-plans,
#masthead #dedicated-pricing-plans,
#masthead-index #dedicated-pricing-plans,
#masthead-contact #dedicated-pricing-plans,
#masthead-website_hosting #dedicated-pricing-plans,
#masthead-minecraft_hosting #dedicated-pricing-plans {
  margin: 0;
}

#masthead .inner h1,
#masthead-index .inner h1,
#masthead-contact .inner h1,
#masthead-website_hosting .inner h1,
#masthead-minecraft_hosting .inner h1,
#masthead #pricing-plans h1,
#masthead-index #pricing-plans h1,
#masthead-contact #pricing-plans h1,
#masthead-website_hosting #pricing-plans h1,
#masthead-minecraft_hosting #pricing-plans h1,
#masthead #minecraft-pricing-plans h1,
#masthead-index #minecraft-pricing-plans h1,
#masthead-contact #minecraft-pricing-plans h1,
#masthead-website_hosting #minecraft-pricing-plans h1,
#masthead-minecraft_hosting #minecraft-pricing-plans h1,
#masthead #dedicated-pricing-plans h1,
#masthead-index #dedicated-pricing-plans h1,
#masthead-contact #dedicated-pricing-plans h1,
#masthead-website_hosting #dedicated-pricing-plans h1,
#masthead-minecraft_hosting #dedicated-pricing-plans h1,
#masthead .inner h4,
#masthead-index .inner h4,
#masthead-contact .inner h4,
#masthead-website_hosting .inner h4,
#masthead-minecraft_hosting .inner h4,
#masthead #pricing-plans h4,
#masthead-index #pricing-plans h4,
#masthead-contact #pricing-plans h4,
#masthead-website_hosting #pricing-plans h4,
#masthead-minecraft_hosting #pricing-plans h4,
#masthead #minecraft-pricing-plans h4,
#masthead-index #minecraft-pricing-plans h4,
#masthead-contact #minecraft-pricing-plans h4,
#masthead-website_hosting #minecraft-pricing-plans h4,
#masthead-minecraft_hosting #minecraft-pricing-plans h4,
#masthead #dedicated-pricing-plans h4,
#masthead-index #dedicated-pricing-plans h4,
#masthead-contact #dedicated-pricing-plans h4,
#masthead-website_hosting #dedicated-pricing-plans h4,
#masthead-minecraft_hosting #dedicated-pricing-plans h4 {
  color: #FFFFFF;
}

#masthead .inner h1,
#masthead-index .inner h1,
#masthead-contact .inner h1,
#masthead-website_hosting .inner h1,
#masthead-minecraft_hosting .inner h1,
#masthead #pricing-plans h1,
#masthead-index #pricing-plans h1,
#masthead-contact #pricing-plans h1,
#masthead-website_hosting #pricing-plans h1,
#masthead-minecraft_hosting #pricing-plans h1,
#masthead #minecraft-pricing-plans h1,
#masthead-index #minecraft-pricing-plans h1,
#masthead-contact #minecraft-pricing-plans h1,
#masthead-website_hosting #minecraft-pricing-plans h1,
#masthead-minecraft_hosting #minecraft-pricing-plans h1,
#masthead #dedicated-pricing-plans h1,
#masthead-index #dedicated-pricing-plans h1,
#masthead-contact #dedicated-pricing-plans h1,
#masthead-website_hosting #dedicated-pricing-plans h1,
#masthead-minecraft_hosting #dedicated-pricing-plans h1 {
  text-transform: uppercase;
  padding-top: 100px;
}


/* ===========================================
                Basic Styles
============================================ */

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

.clearfix:before,
.clearfix:before {
  display: table;
  content: " ";
}

.container,
.inner,
#pricing-plans,
#minecraft-pricing-plans,
#dedicated-pricing-plans {
  margin: 0 auto;
  width: 85%;
}

@media (min-width: 700px) {
  .container,
  .inner,
  #pricing-plans,
  #minecraft-pricing-plans,
  #dedicated-pricing-plans {
    width: 90%;
  }
}

.inner-narrow {
  padding: 40px 0;
  margin: 0 auto;
  width: 85%;
}

@media (min-width: 700px) {
  .inner-narrow {
    width: 60%;
  }
}

.alert,
.notice {
  text-align: center;
}

.center,
#masthead .inner,
#masthead-index .inner,
#masthead-contact .inner,
#masthead-website_hosting .inner,
#masthead-minecraft_hosting .inner,
#masthead #pricing-plans,
#masthead-index #pricing-plans,
#masthead-contact #pricing-plans,
#masthead-website_hosting #pricing-plans,
#masthead-minecraft_hosting #pricing-plans,
#masthead #minecraft-pricing-plans,
#masthead-index #minecraft-pricing-plans,
#masthead-contact #minecraft-pricing-plans,
#masthead-website_hosting #minecraft-pricing-plans,
#masthead-minecraft_hosting #minecraft-pricing-plans,
#masthead #dedicated-pricing-plans,
#masthead-index #dedicated-pricing-plans,
#masthead-contact #dedicated-pricing-plans,
#masthead-website_hosting #dedicated-pricing-plans,
#masthead-minecraft_hosting #dedicated-pricing-plans {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: relative;
  left: 50%;
  top: 50%;
}

.clearfix:after {
  clear: both;
}

.text-center,
.title,
div.title,
.title-left,
#masthead .inner,
#masthead-index .inner,
#masthead-contact .inner,
#masthead-website_hosting .inner,
#masthead-minecraft_hosting .inner,
#masthead #pricing-plans,
#masthead-index #pricing-plans,
#masthead-contact #pricing-plans,
#masthead-website_hosting #pricing-plans,
#masthead-minecraft_hosting #pricing-plans,
#masthead #minecraft-pricing-plans,
#masthead-index #minecraft-pricing-plans,
#masthead-contact #minecraft-pricing-plans,
#masthead-website_hosting #minecraft-pricing-plans,
#masthead-minecraft_hosting #minecraft-pricing-plans,
#masthead #dedicated-pricing-plans,
#masthead-index #dedicated-pricing-plans,
#masthead-contact #dedicated-pricing-plans,
#masthead-website_hosting #dedicated-pricing-plans,
#masthead-minecraft_hosting #dedicated-pricing-plans,
.block,
#about,
#features,
.support-ticket,
#pricing-plans,
#minecraft-pricing-plans,
#dedicated-pricing-plans {
  text-align: center;
}

.bold,
a,
.title,
div.title,
.title-left {
  font-weight: bold;
}

.hidden {
  display: none;
}

.opacity {
  opacity: 0;
}

p {
  color: #AAAAAA;
  line-height: 1.5;
  font-size: 16px;
  margin: 0;
}

a {
  text-decoration: none;
  color: #1DB2E3;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}


/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}


/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}


/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}


/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}


/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}


/* ===========================================
                Buttons
============================================ */

.button,
.button-primary {
  border-radius: 100px;
  font-weight: normal;
  padding: 15px 30px;
  border: 0;
}

.button-primary {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
  -webkit-transition: 700ms background ease-in-out;
  transition: 700ms background ease-in-out;
  background: #1DB2E3;
  color: #FFFFFF;
}

.button-primary:hover {
  background: #333E4F;
}


/* ===========================================
                    Forms
============================================ */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea {
  border: 2px solid #AAAAAA;
  margin: .5em 0 2em 0;
  max-width: 100%;
  outline: none;
  height: 3.5em;
  padding: 1em;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: #1DB2E3;
}

input[type='number'] {
  height: 3.5em;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

textarea {
  max-height: 20em;
  resize: none;
  height: 20em;
}


/* ===========================================
            Main Navigation
============================================ */

#main-navigation {
  background: rgba(0, 0, 0, 0.25);
  min-height: 90px;
  z-index: 999;
}

#main-navigation .navigation-left {
  padding: 37px 0;
  float: left;
}

#main-navigation .navigation-left a.logo {
  text-transform: uppercase;
  font-size: 30px;
  color: #FFFFFF;
}

#main-navigation .navigation-left a.logo img {
  margin-top: 0px;
  height: 60px;
}

#main-navigation .hamburger-menu {
  height: 20px;
  position: absolute;
  width: 30px;
  margin: auto;
  right: -70%;
  bottom: 0;
  left: 0;
  top: 0;
}

#main-navigation .bar,
#main-navigation .bar:after,
#main-navigation .bar:before {
  height: 2px;
  width: 30px;
}

#main-navigation .bar {
  -webkit-transform: translateY(9px);
  transform: translateY(9px);
  background: white;
  -webkit-transition: all 0ms 300ms;
  transition: all 0ms 300ms;
  position: relative;
}

#main-navigation .bar.animate {
  background: rgba(255, 255, 255, 0);
}

#main-navigation .bar:before {
  -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  background: white;
  bottom: 9px;
  position: absolute;
  content: "";
  left: 0;
}

#main-navigation .bar:after {
  -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
  background: white;
  position: absolute;
  top: 9px;
  content: "";
  left: 0;
}

#main-navigation .bar.animate:before {
  -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  bottom: 0;
}

#main-navigation .bar.animate:after {
  -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
}

#main-navigation .navigation-right {
  padding: 37px 0;
  display: none;
  float: right;
}

#main-navigation .navigation-right .item {
  font-weight: normal;
  margin-right: 15px;
  color: #FFFFFF;
}

@media (min-width: 480px) {
  #main-navigation .navigation-right {
    display: block;
  }
  #main-navigation .hamburger-menu {
    display: none;
  }
}

.navigation-right.active {
  display: block !important;
  background: transparent;
  position: absolute;
  margin-top: 90px;
  height: 352px;
  z-index: 999;
  width: 100%;
  left: 0;
  top: 0;
}

.navigation-right.active a {
  text-align: center;
  padding: 16px 0;
  display: block;
}

.navigation-right.active .button-primary {
  margin: 0 auto;
  width: 70%;
}


/*!
Animated
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}


/* ====================
        IPHONE
=======================*/

@media screen and (max-width: 500px) {
  #main-navigation .hamburger-menu {
    height: 20px;
    position: absolute;
    width: 30px;
    margin: auto;
    right: -70%;
    bottom: 0;
    left: 0;
    margin-top: 10%;
  }
  #main-navigation .navigation-right {
    padding: 37px 0;
    display: none;
    float: right;
    background: #4a4a4a;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>MopedBoyz</title>
  <link rel="icon" href="img/mopedIcon.ico">
  <link rel="stylesheet" href="css/navbar.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="js/nav.js"></script>
</head>

<body>

  <div id="main-navigation" class="animated bounceInDown">
    <div class="inner">
      <div class="navigation-left">
        <a href="index.php" class="logo bold">MopedBoyz</a>
      </div>
      <div class="hamburger-menu">
        <div class="bar"></div>
      </div>

      <div class="navigation-right">
        <a href="index.php" class="item">Links</a><a href="chat.php" class="item">  Global Chat</a><a href="messages.php" class="item">Messages</a>
        <a href="accountOptions.php" class="item">Settings</a><a href="sys/logout.php" class="button-primary">Log Out</a></div>

    </div>
  </div>

</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/chat.css" />

<script src="js/chat.js"></script>
<div class="flex-center position-ref full-height">
  <div id="masthead-index">
    <div class="inner">
      <h1><b>MopedBoyz - Chat</b></h1>
      <h4>Do <span class="bold">whatever</span> you want on here.</h4>
    </div>
  </div>
</div>

<script>
  var input = document.getElementById("onpress");
  input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      event.preventDefault();
      document.getElementById("onpress").chatScroll();
    }
  });
</script>

<div class="content-page" id="chat-page">
  <div style="position: absolute">
    <p class="chatButtons"><input type="submit" name="Submit" value="Load More Chats" onclick="chatLoad();" />
      <input type="submit" name="Submit" value="Reset chat" onclick="resetChat();"> </p>
    <div id="chatbox">

      Loading...
    </div>
    <br>
  </div>
  <div class="chat-box">
    <form action="sys/chat.php" method="post">
      <input type="text" name="message" maxlength="500" placeholder="Enter message here" style="box-sizing:border-box; width:60%; position: fixed;" autocomplete="off" onclick="chatScroll();" />
      <input type="submit" value="Send" style="display:none" id="onpress" onclick="chatScroll();" />
    </form>
  </div>
</div>

Comments

Comment posted by halfer

(I have trimmed the supplementary question – it is best to stick to one there here, so that questions can focus on the entirety of what you are asking. Ask a separate question about gradients if necessary).

Comment posted by MrMango

ive tried many position tags and div styles, the top fuction works perfectly fine and im having to change that value depending on the ‘@media screen’ tag rather than when i reposition the window it moves on its own up and down etc..

By

Related Post

HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022
HTML

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022