Huge Gap Between Divs!

HTML-CSS
1

Hi folks,

I have an issue with a huge gap between my divs when scaled. I can’t find out what the issue is!

See video of issue below:

Sep%2026%202018%201_39%20PM%20-%20Edited

See Codepen link here: https://codepen.io/IDCoder/pen/jvqdqv?editors=1100

See CSS code here:


/*...........Into stuf.............*/
.hideit{
  position:relative;
  width: auto;
  height: 700px;
  background-color: skyblue;
  z-index: 1;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 60%);
  clip-path: polygon(0 0, 100% 0, 100% 43%, 0 60%);
}

.about-me-premiere{
  position:absolute;
  width: auto;
  z-index: 1;
  /*border-left: 50px solid #555;
  border-top: 0 solid transparent;
	border-bottom: 9px solid transparent;
	height: 300px;
	width: 100%;
  box-shadow: 5px 10px #888888;*/ 
  margin-left: 30px;
  transform: perspective(500px) rotateY(20deg);
  top:10%;
}

.container {
margin-top: 20px;
margin-bottom: 20px;
height: 100%;
width: auto;
}

.about-me-holder{
position: relative;
border: solid 20px transparent;
border-radius: 40px;
margin-bottom: 10px;
box-shadow: 0 -1px 1px #eee,  0 2px 2px #1d1d1d,  inset 0 0 1px #666,  inset 0 1px .125em #8b8b8b,  inset 0 2px .25em #a4a2a3,  inset 0 -1px .125em #8b8b8b,  inset 0 -2px .25em #a4a2a3,  inset 0 0 0 .375em #cdcdcd;
background: repeating-radial-gradient(rgba(228, 228, 228, 0) 23px, rgba(228, 228, 228, 0.05) 25px, rgba(228, 228, 228, 0) 27px) content-box, repeating-radial-gradient(rgba(166, 166, 166, 0) 13px, rgba(166, 166, 166, 0.05) 15px, rgba(166, 166, 166, 0) 17px) content-box, repeating-radial-gradient(rgba(139, 139, 139, 0) 19px, rgba(139, 139, 139, 0.05) 21px, rgba(139, 139, 139, 0) 23px) content-box, conic-gradient(#cdcdcd, #9d9d9d, #808080, #bcbcbc, #c4c4c4, #e6e6e6, #dddddd, #a1a1a1, #7f7f7f, #8b8b8b, #bfbfbf, #e3e3e3, #d2d2d2, #a6a6a6, #858585, #8d8d8d, #c0c0c0, #e5e5e5, #d6d6d6, #9e9e9e, #828282, #8f8f8f, #bdbdbd, #e3e3e3, #cdcdcd) content-box, radial-gradient(#00d7ff 53%, transparent 65%, transparent 70%, #8b8b8b 70%) padding-box, radial-gradient(#272727 20%, transparent 25%) 0 0 / 1.25em 1.25em padding-box, radial-gradient(#272727 20%, transparent 25%) 0.625em 0.625em / 1.25em 1.25em padding-box, radial-gradient(#444 20%, transparent 28%) 0 0.125em / 1.25em 1.25em padding-box, radial-gradient(#444 20%, #3d3d3d 28%) 0.625em 0.75em / 1.25em 1.25em padding-box, conic-gradient(#b5b5b5, #8d8d8d, #838383, #ababab, #d7d7d7, #e3e3e3, #aeaeae, #8f8f8f, #878787, #acacac, #d7d7d7, #dddddd, #b8b8b8, #8e8e8e, #848484, #a6a6a6, #d8d8d8, #e3e3e3, #8e8e8e, #868686, #a8a8a8, #d5d5d5, #dedede, #b5b5b5) border-box;
}

.About-Me {
background-color: #0099ff;
border-radius: 20px;
box-shadow: inset 0px 5px 20px 0px #000;
width: auto;  
position: relative;
}

.glass{
width: 100%;
height: 50%;
/*background-color: rgb(255,255,255,0.2);*/
background: rgba(113,206,239,0.41);
background: -webkit-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);

background: -o-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);

background: -ms-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);

background: linear-gradient(to bottom, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71ceef', endColorstr='#b7deed', GradientType=0 );
/* for the following elements, rgba(183,222,237,0.41) 78%, 78% was changed to 100% */
position: absolute;
top: 0;
/*border-radius: 20px;*/

border-top-left-radius: 20px;
border-top-right-radius: 20px;

}

/*........Buttons.....................*/
#buttons{
  position: absolute;
  top: 450px;
  background-color: skyblue;
  width: 100%;
  padding-top: 80px;
  z-index: 2;
  
  -webkit-transform: skewY(-10deg);
  -moz-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg);
}

.myButton {
width: 250px;
height: 40px;
line-height: 1.75em;
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
box-shadow: 7px 7px 15px black;
transform: skew(25deg); 
    -o-transform: skew(-25deg); 
    -moz-transform: skew(-25deg);
    -webkit-transform: skew(-25deg);
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
	background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
	background-color:#378de5;
}
.myButton:active {
	position:relative;
	top:1px;
}

.myButton > span{
  display: inline-block;
  transform: skew(25deg); 
}

.dropbtn {
background-color: #4CAF50;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border: 1px dashed black;
}

.dropdown-content a:hover {background-color: #00ffff}

.dropdown:hover .dropdown-content {
    display: block;
  background-color: #f1f1f1;
}


.dropdown {
    position: relative;
    display: inline-block;
}

/*.............middle-section.......................*/

#firstParagraph{
   -webkit-transform: skewY(10deg);
  -moz-transform: skewY(10deg);
  -ms-transform: skewY(10deg);
  -o-transform: skewY(10deg);
  transform: skewY(10deg); 
  margin-top: 40%;
  transform: rotate(.20deg);
  color: #ffffff;
  font-size: 1.25em;
}

#secondParagraph{
  -webkit-transform: skewY(10deg);
  -moz-transform: skewY(10deg);
  -ms-transform: skewY(10deg);
  -o-transform: skewY(10deg);
  transform: skewY(10deg);
  margin-top: 40%;
  transform: rotate(.20deg);
  color: #ffffff;
  font-size: 1.25em;
}

.holder {
  max-width: 500px;
  overflow: hidden;
  position: relative;  
  height: 300px; 
  margin: auto;
}


div.Portfolio.Pics {
  width: 3000px;
  position: absolute;
  overflow: hidden;
}

figure {
  width:500px;
  float:none;
  overflow:hidden;
}


.Portfolio.Pics figure{
overflow: hidden;
height: 500px;
}


.Portfolio.Pics figure img{
width: 100%
float: left;
opacity: 0.65;
  margin-top: 10px;
}

figure{
position: relative;
width: 100%;
margin: 0;
left: 0;
animation: 20s portfolio infinite;
  cursor: pointer;
}


@keyframes portfolio {
	0%{
		left: -100%;     
    }
  25%{
		left:-50%; 
  }
  50%{
		left:-75%;     
	}
  100%{
		right:100%;     
	}

}

figure:hover {
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}

/*.........Connect and other info ..................*/
#middle-section{
  background-color: skyblue;
  margin-top: 20px;
  
  -webkit-transform: skewY(-10deg);
  -moz-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg); 
}

#contact-form {
    background-color: #0099ff;
    padding: 10px 20px 30px 20px;
    width: 400px;
    position: relative;
    border-radius: 20px;
    margin-bottom: 10px;
    box-shadow: inset 5px 0 10px -5px #ffffff, inset -5px 0 10px -5px #ffffff, inset 0px -5px 35px -7px #ffffff, 0 0 1px 1px, 0 10px 20px 0 #494547;
    font-weight: bold;
    /*color: #E5E6E7;*/
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
  -webkit-transform: skewY(10deg);
  -moz-transform: skewY(10deg);
  -ms-transform: skewY(10deg);
  -o-transform: skewY(10deg);
  transform: skewY(10deg); 
}

#contact-form .required {
    font-weight: bold;
    color: #E5E6E7;
}

#contact-form button[type="submit"] {
   cursor:pointer;
   width:100%;
   border: none;
    outline: none;
   background:#e17f3f;
   margin:0 0 5px;
   padding:10px;
   border-radius:5px;
   box-shadow: 1px 3px 2px #444, inset 0px 0px 12px 0px #000;  
}

#contact-form button[type="submit"]:hover {
    background-color: #79bbff;
    color: #e17f3f;
    font-size: 1.5em;
}
#contact-form button[type="submit"] {
    cursor: pointer;
    width: 100%;
    border: none;
    background: #e17f3f;
    margin: 0 0 5px;
    padding: 10px;
    border-radius: 5px;
}


#contact-form input, #contact-form select, #contact-form textarea {
    width: 100%;
    background: #fff;
    border: 0;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin-bottom: 25px;
    padding: 5px;
}

h1 {
   color: #ffffff;
   margin: 10px 0 0 0;
   font-size: 36px;
}
   
h4 {
    color: #ffffff;
}

#skills {
  width: 100px;
  background-color: #0099ff;
    line-height: .5em;
    text-align: center;
    font-size: 2em;
    padding-top: 30px;
    margin-top: 5px;
    text-transform: uppercase;
    color: #bfbdbd;
}

.notification {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    left: 63%;
    background-color: #ff0000;
}

#number {
    font-size: 1.5em;
    line-height: 0;
    position: absolute;
    top: 16px;
    left: 8px;
    color: white;
}


#last-section{
   background-color: skyblue;
  margin-top: 20px;
  
  -webkit-transform: skewY(-10deg);
  -moz-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg); 
}

#very-last-section{
  height: 150px;
      background-color: skyblue;
  margin-top: 20px;
  
  -webkit-transform: skewY(-10deg);
  -moz-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg); 
}

.social-media-icon-footer{
  margin-top: 3.5%;
  width:500px;
  background-color:white;
  color: #0099ff;
  height:80px;
  border: 1px solid black;
  border-radius: 15px;
  text-align: center;
  box-shadow: inset hsla(210,100%,100%,.7) 0 2px 1px 7px, /* top HL */ hsla(210,100%,75%, .8) 0 0px 3px 2px, /* outer SD */ hsla(210,50%,40%, .35) 0 -5px 6px 4px, /* outer SD */ hsla(210,80%,95%, 1) 0 5px 6px 4px;
}

.link-button-holder > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
  
}
.link-button-holder > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 12px;
    font-family: cabinregular;
    text-align: center;
}

div.contact {
  padding: 0px;
  margin-top:-20px;
 /**background-color: black;**/
}

ul.soc {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  position: relative;
  text-align: center;
  width: 100%;
}

ul.soc li {
  display: inline-block;
}

li.socbutton a {
  background-color: #0099ff;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  text-decoration: none;
  text-shadow: 2px 2px black;
  font-size: 12px;
  margin: 5px;
  padding: 5px;
  box-shadow: 7px 7px 5px black;
  width: 300px;
}
2

This height here seems to be pushing down your content.

1 Like
3

@collinstommy, thanks for your help. I will look into that some more…play around with some things and reply here.