skip to Main Content

I’m writing a bookmarking program, and for the past few days, this bug has caught my eye: The “I’m Niva, a: ” bar doesn’t extend to fill up the whole page’s width. I’ve already attempted checking the console, and adding 0 margins+paddings, but nothing seems to work. If anyone could provide a solution, that would be great!

#wide{
    color:white;
    font-size: 60px;
    font-family: 'Quicksand', sans-serif;
    flex: 0.1;
    background-color:rgba(51,153,255,0.5);
}

Program:
https://codepen.io/Refath/pen/RjwOQN

@import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
  /**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
  align-content: no-repeat center center fixed;
  background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.fChange:hover,
.yChange:hover,
.gChange:hover,
.aChange:hover {
  background-color: rgba(3, 3, 3, 0.21);
  transition: all ease 0.2s;
}

.circle,
.r1c,
.r2c,
.r3c,
.r4c {
  width: 90px;
  height: 90px;
  border-radius: 90px;
  fill: lightred;
  position: fixed;
  margin: auto;
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: -5px -5px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.r1c,
.r2c,
.r3c,
.r4c,
.circle {
  animation: around infinite;
  animation-duration: 30s;
  animation-direction: reverse;
}

.r1c.off,
.r2c.off,
.r3c.off,
.r4c.off {
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.circle {
  background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
  background-position: -5px -6px;
  opacity: 0.9;
}

.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
  width: 108px;
  height: 108px;
  border-radius: 108px;
  transition: 0.07s ease-in;
  background-size: 120px 120px;
  background-position: -5.4px -5.4px;
}

.r1c {
  overflow: hidden;
  top: 400px;
  background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}

.r2c {
  top: -400px;
  background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}

.r3c {
  left: 400px;
  background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
}

.r4c {
  right: 400px;
  background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}

.r1l,
.r2l,
.r3l,
.r4l {
  border: white 1px solid;
  width: 0px;
  height: 90px;
  border-radius: 90px;
  fill: lightred;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.r1l {
  top: 200px;
}

.r2l {
  top: -200px;
}

.r3l {
  width: 90px;
  height: 0px;
  left: 200px;
}

.r4l {
  width: 90px;
  height: 0px;
  left: -200px;
}

.parent.off {
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.parent {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  animation: around infinite;
}

.parent.custom {
  animation-duration: 30s;
}

@keyframes around {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#wide {
  color: white;
  font-size: 60px;
  font-family: 'Quicksand', sans-serif;
  flex: 0.1;
  background-color: rgba(51, 153, 255, 0.5);
}

#narrow {
  color: lightblue;
  font-size: 60px;
  flex: 0.9;
  font-family: 'Quicksand', sans-serif;
  background-color: rgba(51, 153, 255, 0.7);
}

.name {
  position: relative;
  font-size: 60px;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
}

.rotate-text {
  color: white;
  font-size: 60px;
  flex: 0.5;
  font-family: 'Quicksand', sans-serif;
  background: lightblue;
  background-color: rgba(51, 153, 255, 0.8);
}

#parent {
  display: flex;
  background-color: red;
}

.juan {
  font: 40px/50px Arial;
  text-align: center;
}

.jesus {
  text-align: center;
  font-size: 20px;
}

.rotate-text {
  display: inline-block;
  background-color: lightgreen;
}

.rotating {
  float: right;
  overflow: hidden;
  position: relative;
  height: 100px;
}

.inside {
  display: inline-block;
  color: lightblue;
  position: relative;
  white-space: nowrap;
  top: -20px;
  left: 0px;
  animation: move 5s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  padding: 20px;
}

@keyframes move {
  0% {
    top: -20px;
  }
  20% {
    top: -100px;
  }
  40% {
    top: -200px;
  }
  60% {
    top: -300px;
  }
}

.name {
  color: white;
}

.options {
  width: 400px;
  height: 450px;
  color: white;
  padding: 15px 10px 0px 5px;
  float: left;
  position: relative;
  top: -340px;
  left: 20px;
}

.gtext,
.atext,
.ytext,
.ftext {
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  width: 20px;
  height: 25px;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
}

li {
  padding: 7px;
}

html {
  overflow: hidden;
  height: 100%;
}

body {
  height: 100%;
  overflow: auto;
}

button {
  fill: red;
}

.setText {
  text-align: center;
  font-size: 20px;
}

button {
  color: red;
}


/**Derived from: **/

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
  font-size: 2em;
}
.fa {
  position: relative;
  display: table-cell;
  width: 160px;
  height: 236px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
  width: 300px;
  overflow: visible;
  overflow-y: scroll;
  padding-left: 20px;
  transition: 0.9s ease-out all;
}
.main-menu {
  padding-left: 20px;
  background: #fbfbfb;
  position: absolute;
  top: 100px;
  background-color: rgba(51, 153, 255, 0.5);
  bottom: 0px;
  height: 90%;
  left: 0;
  width: 20px;
  overflow: visible;
  overflow-y: scroll;
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 1000;
  padding-top: 20px;
  transition: 0.9s ease-out all;
  padding-bottom: 50px;
}
.featureName {
  transform: rotate(-90deg);
  position: relative;
  top: 50%;
  right: 10px;
}
.main-menu:hover>.featureName {
  visibility: hidden;
}
.main-menu>ul {
  margin: 2px 0;
}
.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}

/**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
**/
.main-menu li>a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: #999;
  font-family: arial;
  font-size: 14px;
  text-decoration: none;
  -webkit-transform: translateZ(0) scale(1, 1);
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}
.main-menu .nav-icon {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 20px;
}
.main-menu>ul.logout {
  position: absolute;
  left: 0;
  bottom: 0;
}
.no-touch .scrollable.hover {
  overflow-y: visible;
  overflow-y: scroll;
}
.no-touch .scrollable.hover:hover {
  overflow-y: auto;
  overflow: visible;
  overflow-y: scroll;
}
a:hover,
a:focus {
  text-decoration: none;
}
nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
  color: #fff;
  background-color: #5fa2db;
}
.blurredBg {
  height: 100%;
  width: 100%;
  text-align: center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#ImageUrl {}
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=entypo);
a[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* ---------- GENERAL ---------- */
a {
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container {
  left: 70%;
  position: absolute;
  top: 50%;
  transition: 0.3s all ease;
}

/* ---------- SOCIAL ---------- */
.social {
  position: relative;
  height: 3em;
  width: 13.5em;
}
.social li {
  display: block;
  height: 4em;
  line-height: 4em;
  margin: -2.2em;
  position: absolute;
  -webkit-transition: -webkit-transform .7s;
  -moz-transition: -moz-transform .7s;
  -ms-transition: -ms-transform .7s;
  -o-transition: -o-transform .7s;
  transition: transform .7s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  width: 4em;
}
.social a {
  color: #fffdf0;
  display: block;
  height: 4em;
  line-height: 4em;
  text-align: center;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 4em;
  transition: 0.3s all ease;
}
.social li:hover {
  -webkit-transform: scale(1.3, 1.3) rotate(45deg);
  -moz-transform: scale(1.3, 1.3) rotate(45deg);
  -ms-transform: scale(1.3, 1.3) rotate(45deg);
  -o-transform: scale(1.3, 1.3) rotate(45deg);
  transform: scale(1.3, 1.3) rotate(45deg);
  transition: 0.3s all ease;
}
.facebook {
  background: #155b9d;
  left: 0;
  top: 0%;
}
.container img {
  width: 50px;
  position: relative;
  top: -20%;
}
.twitter {
  background: #1a9ec4;
  bottom: 0;
  left: 25%;
}
.dribbble {
  background-color: lightblue;
  left: 50%;
  top: 0%;
  width: 5em;
  height: 5em;
}
.dribbble img {
  top: 0%;
}
.social .dribbble {
  width: 5em;
  height: 5em;
  left: 46%;
  top: -50%;
}
.behance {
  background: #3f7aa3;
  bottom: 0;
  left: 75%;
}
.linked-in {
  background: #157f9d;
  left: 100%;
  top: 0%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="blurredBg">
</div>

<div id="parent">
  <div class="animated slideInLeft" id="wide">
    <center>Hi.</center>
  </div>

  <div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
    <center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
      <b class="rotating"> <span class = "inside">
    One-Stop Shop<br>
    Music Player<br>
    Task Manager<br>
     Hover Me!
  </span></b>
    </center>
  </div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
  <div id="weather"></div>


  <div class="circle">
  </div>

  <a href="https://www.google.com" class="glink">
    <div class="r1c">
    </div>
  </a>

  <a href="https://www.youtube.com" class="ylink">
    <div class="r2c">
    </div>
  </a>

  <a href="https://www.facebook.com" class="flink">
    <div class="r3c">
    </div>
  </a>

  <a href="https://www.amazon.com" class="alink">
    <div class="r4c">
    </div>
  </a>

  <div class="r1l">
  </div>

  <div class="r2l">
  </div>

  <div class="r3l">
  </div>

  <div class="r4l">
  </div>

</div>




<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<h2 class="name">
  ~ Refath</h2>



<div class="area"></div>
<nav class="main-menu">
  <div class="featureName">Settings</div>
  <div class="jesus">
    <h3>Settings</h3>
    <hl>
      <ul>


        <li class="gChange">Google</li>
        <button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
        <button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
   document.getElementById('gSave').click()">

        <li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">

        <li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">

        <li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">

        <li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
        <button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">

        <li class="bgChange">Background Image</li>
        <input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
				
			<br>	<br>	
 <button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>

      </ul>
  </div>
</nav>

<div class="container">

  <ul class="social">
    <li class="dribbble">
      <a href="https://chrome.google.com/webstore/detail/niva/baopkdjidjammmkhafmcienkakepjdmg" class="entypo-dribbble"><img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png"></a>
    </li>
  </ul>

</div>


<form>
  <label>Enter a new task:</label>
  <input class="input" type="text">
  <input type="submit" value="Add">
</form>
<ul title="Click to delete; drag to reorder">
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="scripts.js"></script>

2

Answers


  1. Chosen as BEST ANSWER

    Problem solved! Turns out there was a padding code afterwards interfering with my commands!


  2. body {
        height: 100%;
        /* overflow: auto; */
    }
    
    @import url('https://fonts.googleapis.com/css?family=Quicksand:500');
    body {
      /**background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg")**/
      align-content: no-repeat center center fixed;
      background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    
    .fChange:hover,
    .yChange:hover,
    .gChange:hover,
    .aChange:hover {
      background-color: rgba(3, 3, 3, 0.21);
      transition: all ease 0.2s;
    }
    
    .circle,
    .r1c,
    .r2c,
    .r3c,
    .r4c {
      width: 90px;
      height: 90px;
      border-radius: 90px;
      fill: lightred;
      position: fixed;
      margin: auto;
      background-size: 100px 100px;
      background-repeat: no-repeat;
      background-position: -5px -5px;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
    }
    
    .r1c,
    .r2c,
    .r3c,
    .r4c,
    .circle {
      animation: around infinite;
      animation-duration: 30s;
      animation-direction: reverse;
    }
    
    .r1c.off,
    .r2c.off,
    .r3c.off,
    .r4c.off {
      -ms-animation-play-state: paused;
      -o-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }
    
    .circle {
      background-image: url(https://qph.ec.quoracdn.net/main-qimg-a1bd7842675b4c551751a7bb50da3667);
      background-position: -5px -6px;
      opacity: 0.9;
    }
    
    .r1c:hover,
    .r2c:hover,
    .r3c:hover,
    .r4c:hover {
      width: 108px;
      height: 108px;
      border-radius: 108px;
      transition: 0.07s ease-in;
      background-size: 120px 120px;
      background-position: -5.4px -5.4px;
    }
    
    .r1c {
      overflow: hidden;
      top: 400px;
      background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
    }
    
    .r2c {
      top: -400px;
      background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
    }
    
    .r3c {
      left: 400px;
      background-image: url(https://cdn.worldvectorlogo.com/logos/facebook-3.svg);
    }
    
    .r4c {
      right: 400px;
      background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
    }
    
    .r1l,
    .r2l,
    .r3l,
    .r4l {
      border: white 1px solid;
      width: 0px;
      height: 90px;
      border-radius: 90px;
      fill: lightred;
      position: absolute;
      margin: auto;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
    }
    
    .r1l {
      top: 200px;
    }
    
    .r2l {
      top: -200px;
    }
    
    .r3l {
      width: 90px;
      height: 0px;
      left: 200px;
    }
    
    .r4l {
      width: 90px;
      height: 0px;
      left: -200px;
    }
    
    .parent.off {
      -ms-animation-play-state: paused;
      -o-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }
    
    .parent {
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      animation: around infinite;
    }
    
    .parent.custom {
      animation-duration: 30s;
    }
    
    @keyframes around {
      0% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(90deg);
      }
      25% {
        transform: rotate(90deg);
      }
      50% {
        transform: rotate(180deg);
      }
      50% {
        transform: rotate(180deg);
      }
      75% {
        transform: rotate(270deg);
      }
      75% {
        transform: rotate(270deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    #wide {
      color: white;
      font-size: 60px;
      font-family: 'Quicksand', sans-serif;
      flex: 0.1;
      background-color: rgba(51, 153, 255, 0.5);
    }
    
    #narrow {
      color: lightblue;
      font-size: 60px;
      flex: 0.9;
      font-family: 'Quicksand', sans-serif;
      background-color: rgba(51, 153, 255, 0.7);
    }
    
    .name {
      position: relative;
      font-size: 60px;
      text-align: center;
      font-family: 'Quicksand', sans-serif;
    }
    
    .rotate-text {
      color: white;
      font-size: 60px;
      flex: 0.5;
      font-family: 'Quicksand', sans-serif;
      background: lightblue;
      background-color: rgba(51, 153, 255, 0.8);
    }
    
    #parent {
      display: flex;
      background-color: red;
    }
    
    .juan {
      font: 40px/50px Arial;
      text-align: center;
    }
    
    .jesus {
      text-align: center;
      font-size: 20px;
    }
    
    .rotate-text {
      display: inline-block;
      background-color: lightgreen;
    }
    
    .rotating {
      float: right;
      overflow: hidden;
      position: relative;
      height: 100px;
    }
    
    .inside {
      display: inline-block;
      color: lightblue;
      position: relative;
      white-space: nowrap;
      top: -20px;
      left: 0px;
      animation: move 5s;
      animation-iteration-count: infinite;
      animation-delay: 1s;
      padding: 20px;
    }
    
    @keyframes move {
      0% {
        top: -20px;
      }
      20% {
        top: -100px;
      }
      40% {
        top: -200px;
      }
      60% {
        top: -300px;
      }
    }
    
    .name {
      color: white;
    }
    
    .options {
      width: 400px;
      height: 450px;
      color: white;
      padding: 15px 10px 0px 5px;
      float: left;
      position: relative;
      top: -340px;
      left: 20px;
    }
    
    .gtext,
    .atext,
    .ytext,
    .ftext {
      border-radius: 20px;
      background-color: rgba(255, 255, 255, 0.5);
      width: 20px;
      height: 25px;
      color: white;
      font-family: 'Quicksand', sans-serif;
      font-size: 20px;
    }
    
    li {
      padding: 7px;
    }
    
    html {
      overflow: hidden;
      height: 100%;
    }
    
    body {
      height: 100%;
      /* overflow: auto; */
    }
    
    button {
      fill: red;
    }
    
    .setText {
      text-align: center;
      font-size: 20px;
    }
    
    button {
      color: red;
    }
    
    
    /**Derived from: **/
    
    @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
    
    }
    @import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
    .fa-2x {
      font-size: 2em;
    }
    .fa {
      position: relative;
      display: table-cell;
      width: 160px;
      height: 236px;
      text-align: center;
      vertical-align: middle;
      font-size: 20px;
    }
    .main-menu:hover,
    nav.main-menu.expanded {
      width: 300px;
      overflow: visible;
      overflow-y: scroll;
      padding-left: 20px;
      transition: 0.9s ease-out all;
    }
    .main-menu {
      padding-left: 20px;
      background: #fbfbfb;
      position: absolute;
      top: 100px;
      background-color: rgba(51, 153, 255, 0.5);
      bottom: 0px;
      height: 90%;
      left: 0;
      width: 20px;
      overflow: visible;
      overflow-y: scroll;
      -webkit-transition: width .05s linear;
      transition: width .05s linear;
      -webkit-transform: translateZ(0) scale(1, 1);
      z-index: 1000;
      padding-top: 20px;
      transition: 0.9s ease-out all;
      padding-bottom: 50px;
    }
    .featureName {
      transform: rotate(-90deg);
      position: relative;
      top: 50%;
      right: 10px;
    }
    .main-menu:hover>.featureName {
      visibility: hidden;
    }
    .main-menu>ul {
      margin: 2px 0;
    }
    .main-menu li {
      position: relative;
      display: block;
      width: 250px;
    }
    
    /**your element has a height of auto, overflow hidden, and content within it that are position float. giving that outer element a set height, and then a child element that grows to fit the content, would allow the parent element to scroll the child
    **/
    .main-menu li>a {
      position: relative;
      display: table;
      border-collapse: collapse;
      border-spacing: 0;
      color: #999;
      font-family: arial;
      font-size: 14px;
      text-decoration: none;
      -webkit-transform: translateZ(0) scale(1, 1);
      -webkit-transition: all .1s linear;
      transition: all .1s linear;
    }
    .main-menu .nav-icon {
      position: relative;
      display: table-cell;
      width: 60px;
      height: 36px;
      text-align: center;
      vertical-align: middle;
      font-size: 18px;
    }
    .main-menu .nav-text {
      position: relative;
      display: table-cell;
      vertical-align: middle;
      width: 20px;
    }
    .main-menu>ul.logout {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .no-touch .scrollable.hover {
      overflow-y: visible;
      overflow-y: scroll;
    }
    .no-touch .scrollable.hover:hover {
      overflow-y: auto;
      overflow: visible;
      overflow-y: scroll;
    }
    a:hover,
    a:focus {
      text-decoration: none;
    }
    nav {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
    nav ul,
    nav li {
      outline: 0;
      margin: 0;
      padding: 0;
    }
    .main-menu li:hover>a,
    nav.main-menu li.active>a,
    .dropdown-menu>li>a:hover,
    .dropdown-menu>li>a:focus,
    .dropdown-menu>.active>a,
    .dropdown-menu>.active>a:hover,
    .dropdown-menu>.active>a:focus,
    .no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
    .dashboard-page nav.dashboard-menu ul li.active a {
      color: #fff;
      background-color: #5fa2db;
    }
    .blurredBg {
      height: 100%;
      width: 100%;
      text-align: center;
      background-size: cover;
      position: absolute;
      left: 0;
      top: 0;
      background-image: url("http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    #ImageUrl {}
    @charset "utf-8";
    @import url(http://weloveiconfonts.com/api/?family=entypo);
    a[class*="entypo-"]:before {
      font-family: 'entypo', sans-serif;
    }
    
    /* ---------- GENERAL ---------- */
    a {
      text-decoration: none;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .container {
      left: 70%;
      position: absolute;
      top: 50%;
      transition: 0.3s all ease;
    }
    
    /* ---------- SOCIAL ---------- */
    .social {
      position: relative;
      height: 3em;
      width: 13.5em;
    }
    .social li {
      display: block;
      height: 4em;
      line-height: 4em;
      margin: -2.2em;
      position: absolute;
      -webkit-transition: -webkit-transform .7s;
      -moz-transition: -moz-transform .7s;
      -ms-transition: -ms-transform .7s;
      -o-transition: -o-transform .7s;
      transition: transform .7s;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      text-align: center;
      width: 4em;
    }
    .social a {
      color: #fffdf0;
      display: block;
      height: 4em;
      line-height: 4em;
      text-align: center;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      width: 4em;
      transition: 0.3s all ease;
    }
    .social li:hover {
      -webkit-transform: scale(1.3, 1.3) rotate(45deg);
      -moz-transform: scale(1.3, 1.3) rotate(45deg);
      -ms-transform: scale(1.3, 1.3) rotate(45deg);
      -o-transform: scale(1.3, 1.3) rotate(45deg);
      transform: scale(1.3, 1.3) rotate(45deg);
      transition: 0.3s all ease;
    }
    .facebook {
      background: #155b9d;
      left: 0;
      top: 0%;
    }
    .container img {
      width: 50px;
      position: relative;
      top: -20%;
    }
    .twitter {
      background: #1a9ec4;
      bottom: 0;
      left: 25%;
    }
    .dribbble {
      background-color: lightblue;
      left: 50%;
      top: 0%;
      width: 5em;
      height: 5em;
    }
    .dribbble img {
      top: 0%;
    }
    .social .dribbble {
      width: 5em;
      height: 5em;
      left: 46%;
      top: -50%;
    }
    .behance {
      background: #3f7aa3;
      bottom: 0;
      left: 75%;
    }
    .linked-in {
      background: #157f9d;
      left: 100%;
      top: 0%;
    }
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour-standalone.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-flat-attack.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.0.0/css/vex-theme-os.css" />
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    
    <div class="blurredBg">
    </div>
    
    <div id="parent">
      <div class="animated slideInLeft" id="wide">
        <center>Hi.</center>
      </div>
    
      <div class="tooltipped animated lightSpeedIn" data-position="bottom" data-delay="50" data-tooltip="Hey there! Just hover over that Settings on the left :) Trust me on this one. " id="narrow">
        <center>I'm <img src="https://qph.ec.quoracdn.net/main-qimg-00f778bc5f5fcb5d79a0372986ab1e66.webp" width=70>iva, a:
          <b class="rotating"> <span class = "inside">
        One-Stop Shop<br>
        Music Player<br>
        Task Manager<br>
         Hover Me!
      </span></b>
        </center>
      </div>
    </div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="parent">
      <div id="weather"></div>
    
    
      <div class="circle">
      </div>
    
      <a href="https://www.google.com" class="glink">
        <div class="r1c">
        </div>
      </a>
    
      <a href="https://www.youtube.com" class="ylink">
        <div class="r2c">
        </div>
      </a>
    
      <a href="https://www.facebook.com" class="flink">
        <div class="r3c">
        </div>
      </a>
    
      <a href="https://www.amazon.com" class="alink">
        <div class="r4c">
        </div>
      </a>
    
      <div class="r1l">
      </div>
    
      <div class="r2l">
      </div>
    
      <div class="r3l">
      </div>
    
      <div class="r4l">
      </div>
    
    </div>
    
    
    
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <h2 class="name">
      ~ Refath</h2>
    
    
    
    <div class="area"></div>
    <nav class="main-menu">
      <div class="featureName">Settings</div>
      <div class="jesus">
        <h3>Settings</h3>
        <hl>
          <ul>
    
    
            <li class="gChange">Google</li>
            <button class="gClick waves-effect waves-light green darken-2 btn">Change</button>
            <button onClick="store()" class="gSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="gtext" id="gtext" placeholder="Paste New URL" onkeydown="if (event.keyCode == 13)
       document.getElementById('gSave').click()">
    
            <li class="aChange">Amazon</li><button class="aClick waves-effect waves-light green darken-2 btn">Change</button>
            <button class="aSave waves-effect waves-light blue darken-2 btn">Done</button><input type="text" class="atext" placeholder="Paste New URL">
    
            <li class="yChange">Youtube</li><button class="yClick waves-effect waves-light green darken-2 btn">Change</button>
            <button class="ySave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ytext" placeholder="Paste New URL">
    
            <li class="fChange">Facebook</li><button class="fClick waves-effect waves-light green darken-2 btn">Change</button>
            <button class="fSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="ftext" placeholder="Paste New URL">
    
            <li class="speedChange">Speed</li><button class="speedClick waves-effect waves-light green darken-2 btn">Change</button>
            <button class="speedSave waves-effect waves-light blue darken-2 btn">Done</button><input type=t ext class="speedtext" placeholder="Change wheel speed">
    
            <li class="bgChange">Background Image</li>
            <input id="ImageUrl" placeholder="Background Image URL" /> <button class="waves-effect waves-light blue darken-2 btn" id="Btn">Go</span>
    				
    			<br>	<br>	
     <button class = "simple waves-effect waves-light green darken-2 btn">Simplify</button>
    
          </ul>
      </div>
    </nav>
    
    <div class="container">
    
      <ul class="social">
        <li class="dribbble">
          <a href="https://chrome.google.com/webstore/detail/niva/baopkdjidjammmkhafmcienkakepjdmg" class="entypo-dribbble"><img src="http://cdn.appstorm.net/web.appstorm.net/files/2010/12/Chrome-Store1.png"></a>
        </li>
      </ul>
    
    </div>
    
    
    <form>
      <label>Enter a new task:</label>
      <input class="input" type="text">
      <input type="submit" value="Add">
    </form>
    <ul title="Click to delete; drag to reorder">
    </ul>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <script src="scripts.js"></script>

    Also you have a problem with

    .main-menu {
      height: 90%;
    

    screenshot

    It should be

    height: calc(100% - 100px);
    

    But it would be better if you remove height (or set it to auto) and use only

    bottom: 0;
    

    So The block will fit regardless window size:

    screenshot of fixed isuue

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search