We Keep Coding

Resizing Screen: Messes up sections on website

I was creating a website and am stuck because I keep resizing the screen and trying to make it mobile friendly. However, there are two sections that I cannot seem to fix. I cannot remember how I got the first three sections to stop moving while I resized the screen. I was wondering if I could get some help.
My website is shivaniahuja.com
If you look at the contact me page and the footer and try to resize them you will see the problem. Please let me know if you can help and I can attach my code if needed.
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
height: 100vh;
background-image: url(../imgs/Background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
}
img{
width: 15%;
height: 100%;
}
#first-name{
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #2f3338;
padding-left: 2%;
font-size: 2vmin;
}
nav{
width: 100%;
height: 10vh;
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li a{
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 2vmin;
color: #2f3338;
padding: 20px;
}
nav ul li a:hover{
color: #3377CC;
}
#main p{
position: absolute;
top: -1000px;
text-align: center;
color: white;
font-size: 50px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
section{
width: 100%;
text-align: center;
padding-top: 7%;
}
html{
scroll-behavior: smooth;
overflow-x: hidden;
}
section#about-me #p2{
width: 40%;
position: relative;
height: 40%;
float: right;
top: 40%;
margin-top: 3%;
right: 10%;
line-height: 200%;
font-family: 'Libre Franklin', sans-serif;
text-align: justify;
font-size: 2.2vmin;
}
section#about-me{
height: 60vh;
}
section#photography{
height: 110vh;
background-color: #F5F5F5;
}
section#experience{
height: 280vh;
background-color: #F5F5F5;
}
section#contact{
}
#contact-header{
font-size: 2.5vmin;
top: 20%;
}
section#about-me #pic{
width: 40%;
height: 40%;
position: absolute;
right: 55%;
margin-top: 2%
}
#contact-div{
position: relative;
top: 50%;
}
section#blog{
width: 100%;
padding-top: 8.5%;
}
.navs::before,
.navs::after {
display: inline-block;
content: "";
border-top: 2px solid black;
width: 5%;
margin: 0 1rem;
transform: translateY(-0.5rem);
}
h2{
position: relative;
top: -200;
}
#title{
position: absolute;
top: 50%;
font-size: 10vmin;
color: white;
left: 35%;
}
span{
position: absolute;
top: 60%;
font-size: 300%;
color: white;
left: 35%;
display: inline-block;
}
span:before{
content: 'HTML';
animation: animate infinite 8s;
position: relative;
left: 50%;
font-size: 6vmin;
}
#keyframes animate{
0%{
content: 'ENGINEER';
}
25%{
content: 'ENGINEER';
}
50%{
content: 'DEVELOPER';
}
75%{
content: 'DEVELOPER';
}
100%{
content: 'ANALYST';
}
}
.pic-and-text{
width: 18%;
height: 22%;
border-radius: 15%
}
section#experience #pic01{
left: -20%;
margin-top: 2%;
margin-bottom: 5%;
position: relative;
}
section#experience #berkeley-name{
position: relative;
font-size: 3vmin;
left: 5%;
top: 0%;
color: #3377CC;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-major{
position: relative;
font-size: 16px;
bottom: 200px;
left: 78px;
color: #5E9515;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-location{
position: relative;
font-size: 16px;
bottom: 195px;
right: 65px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-description{
position: relative;
bottom: 180px;
height: 40px;
width: 600px;
right: -610px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
font-size: 2vmin;
}
section#blog #full-blog{
position: relative;
top: -40px;
}
section#blog .blog-description{
font-size: 20px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
}
#pic001{
width: 17.5%;
}
#pic002{
width: 17.5%;
}
#pic003{
width: 17.5%;
}
.header{
font-size: 3.5vmin;
}
.blog-pics{
margin-left: .5%;
margin-top: 1%
}
section#blog #blog-description01{
margin-top: 15px;
}
#photography-paragraph{
font-size: 2.5vmin;
font-family: 'Libre Franklin', sans-serif;
margin-bottom: 2vh;
margin-top: 2vh;
}
.polaroid {
cursor:pointer;
margin:10px;
border: 1px solid #cccccc78;
background-color: #ffffff;
padding: 7%;
box-shadow: 4px 6px 4px #00000012;
text-align: center;
font-family: 'Caveat','Arial', sans-serif;
}
.polaroid .square {
background:black;
}
.polaroid .picture {
width:100%;
padding-top: 100%;
background-position: center;
background-size:cover;
opacity:0;
}
.polaroid.developed .square {
animation: flash 1.5s;
background:black;
}
.polaroid.developed .picture {
animation: fade-in 3s;
opacity:1;
}
.polaroid .labelName {
text-align: center;
font-size: 24px;
line-height:26px;
}
.polaroid-gallery {
display:-ms-grid;
display:grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 23% 23% 23% 23%;
margin-left: 5%
}
/* Adjust CSS Grid for Microsoft Edge */
.polaroid:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column:1;
}
.polaroid:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column:2;
}
.polaroid:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column:3;
}
.polaroid:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column:4;
}
.polaroid:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column:1;
}
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes flash {
2% {
background:black;
opacity: 0.5;
}
5% {
background:white;
opacity:1;
}
50% {
background:white;
opacity:.5
}
}
#footer{
background-color: #000000;
width: 100%;
padding-top: 2vh;
color: white;
padding-left: 1%;
}
#footer-paragraph{
position: relative;
top: 60%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #000;
background-color: #FFF;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #000;
border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<h1 id="title"> SHIVANI AHUJA</h1>
<span></span>
<body>
<div class ="container">
<div id="main">
<nav>
<div id= "first-name"> SHIVANI AHUJA </div>
<ul>
<li> ABOUT ME </li>
<li> EXPERIENCE</li>
<li> BLOG POSTS</li>
<li> PHOTOGRAPHY</li>
<li> CONTACT </li>
</ul>
</nav>
</div>
<section id="about-me">
<h1 class="navs" class="header"> ABOUT ME</h1>
<img src="assets/imgs/paris-2017-home.jpeg" id="pic">
<div id="p2div">
<p id="p2"> Hey! My name is Shivani and I am an undergraduate student at UC Berkeley studying Computer Science. I'm super passionate about Artificial Intelligence and Natural Language Processing. Haha, I sound like a nerd right now, but I really love what I do! I've spent tons of hours curating images and watching HTML and CSS tutorials on Youtube to finally create this masterpiece that lies in front of you. The process of creating this website was fun, yet undeniably frustrating. After creating my first website from scratch, I plan to create many more and teach others how to recreate this process!</p>
</div>
</section>
<section id="experience">
<h1 class="navs"> HERE'S WHAT I'VE DONE SO FAR</h1>
<div class= "experience-squares" id="experience-square">
<img src="assets/imgs/coming.png" class="pic-and-text" id="pic01">
<p id="berkeley-name"> Creator and iOS Developer, Summer 2020</p>
<p id="berkeley-major"> IBS Application </p>
<p id="berkeley-location"> Hayward, CA</p>
<p id="berkeley-description"> Currently,</p>
</div>
</div>
</section>
<section id="blog">
<div id=full-blog>
<h1 class="navs" class="header">BLOG</h1>
<p class="blog-description" id= "blog-description01"> I write about women in tech, hiking, and some of my personal experiences.</p>
<p class="blog-description" id= "blog-description02"> Here are three of my recent posts:</p>
<div id="pictures">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic001" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic002" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic003" class="blog-pics">
</div>
</div>
</section>
<section id="photography">
<h1 class="navs" class="header">PHOTOGRAPHY</h1>
<p id="photography-paragraph"> Creating memorabilia is an art. An art that has allowed me to capture the emotions, smiles, and happiness of every individual depcited in this gallery.</p>
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sunflower.JPG')"></div>
</div>
<div class="labelName">SunFlowers</div>
<div class="labelText">Berkeley, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/pic-with-mom.png')"></div>
</div>
<div class="labelName">Mommy's Girl</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sailboat.jpg')"></div>
</div>
<div class="labelName">Sailboat</div>
<div class="labelText">Santa Cruz, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/glasses-aesthetic.JPG')"></div>
</div>
<div class="labelName">Foolin' Around</div>
<div class="labelText">Berkeley, CA</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/flowers.jpg')"></div>
</div>
<div class="labelName">Orchid Bush</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/graduation.jpg')"></div>
</div>
<div class="labelName"> Besties 4 Life!</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/background.jpg')"></div>
</div>
<div class="labelName">Pink Sky</div>
<div class="labelText">Lake Tahoe, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/cousins.PNG')"></div>
</div>
<div class="labelName">Three Idiots</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
</section>
<div id="wrap">
<section id="contact">
<h1 class="navs" class="contact-header">CONTACT</h1>
<p id="contact-paragraph">If you have any inquiries or questions, please feel free to contact me on these social media
sites. I look forward to hearing from you! </p>
<br/>
<div align="center" class="socialbtns">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
</body>
</html>

I found one inconsistency were you wrapped up your div tag...
This often leads to buggy layouts just for not closing tags properly.
<div id="wrap">
<section id="contact">
<!-- your HTML code -->
<div align="center" class="socialbtns">
<!-- your HTML code -->
</div>
</div><!-- REMOVE THIS! did you want to finish div#wrap here ? -->
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div><!-- or did you want to finish div#wrap here ? -->

To make the whole site responsive put a <meta> tag like the one below before and after the <body> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Next, set out your HTML like this:
<div id="wrap">
<section id="contact">
<!-- Code here -->
<div align="center" class="socialbtns">
<!-- Your Code Here -->
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
And of course use the <meta> tags I mentioned

Add position relative to .polaroid-gallery
.polaroid-gallery {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 40% 40% 40% 36%;
margin-left: 5%;
position: absolute;
}
nav {
width: 100%;
/* height: 10vh; */ i remove this for the menu dont resize to much
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
section#contact {
margin-bottom: 2vh;
font-size: 2.5vmin;
border: 3px solid red; /* to test */
background: black; /* to test */
}
i recommend you check the structure of your html, and relative sizes to responsive design

Responsive square image and text grid

An issue has been created when min-width:768px the image and text content alignment break down!
Basically, I want to keep image and text at a time, one after another in mobile layout, and one image and related text should be aligned horizontally one after another in tablet layout, but its breakdown! The desktop layout is Okay !
Here is the code
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
float: left;
position: relative;
padding-bottom: 100%;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
</div>
</div>
</div>

I would rethink the structure, since your 8 boxes are basically 4 boxes with 2 parts in each of them. Then you can control the sequence with float left/right, like this:
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
position: relative;
padding-bottom: 100%;
}
.floatleft .s-about-col {
float:left;
}
.floatright .s-about-col {
float:right;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</div>

Please put this code in your CSS.
#media (max-width: 767px) {
.s-about-col{padding-bottom: 0;}
.s-about-col .s-about-col-content{position: relative;}
}

Make div overlap horizontally the other 4 divs and stretch across the page(height 100%?)

So i have 4 different divs with buttons in them and I'm trying to set up so whenever one of those buttons are being clicked, it will overlap the other divs on the page.
I know it has something to do with z-index and positioning of the divs but I guess it needs to be added to the Jquery rather than the CSS?
I have checked out a previous code, where the divs overlap eachother vertically. Here's that code:
$('#divleft, #divmid, #divright').toggle(function () {
var cfg = {height:'200', width:'100%'};
$(this).css({'z-index':100});
var pct = $(this).css('left').split('p')[0]/$(document).width();
if(pct <= .33 && pct > 0){
cfg.left = '0';
$(this).data('oldLeft', "33%");
} else if(pct <= .66 && pct > .33) {
cfg.left = '0';
$(this).data('oldLeft', "66%");
}
$(this).animate(cfg)
}, function () {
var cfg= {height:'200', width:'33%', 'z-index':1};
if ($(this).data('oldLeft')) {
console.log($(this).data('oldLeft'));
cfg.left = $(this).data('oldLeft');
}
$(this).animate(cfg)
})
#divleft {
width:33.3%;
height:200px;
background:#ccc;
z-index: 1;
margin-top: 10px;
position: absolute;
left:0;
}
#divmid {
width:33.3%;
height: 200px;
background: #696;
margin-top: 10px;
z-index: 1;
position:absolute;
left:33%;
}
#divright {
width:33.3%;
height:200px;
background:#000;
margin-top: 10px;
z-index: 1;
position:absolute;
left:66%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divleft"><p>Click Me!</p></div>
<div id="divmid"></div>
<div id="divright"></div>
What this code does is that it overlaps the divs using width 100%, vertically. I was just wondering how you would go about if you were to overlap the divs horizontally.
My code so far is this:
html, body {
width: 80%;
margin: 0 auto;
}
head {
text-align:left;
}
head, img {
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container {
width: 100%;
height: 100%;
margin: 0 auto;
}
button {
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
transition: 0.4s;
margin-top: 2%;
}
.icon {
width: 25px;
height: 25px;
padding-right: 15%;
float: right;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
<div class="container">
<div id="first">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="second">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="third">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="fourth">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
<div id="last">
<button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
</div>
</div>
Thanks!

I think what you are trying to get it has more to do with relative height and absolute positioning than with the z-index property only.
Once the element div is clicked it has to cover the parent element. To do that you should put the container the position: relative property and the growing element as position: absolute and the height and width to 100% and positioning top and leftcoinciding with the parent (to 0). The button is inside that div (#first, #second, #third, #last) so it has to be also height: 100%
And finally you just set the z-index to ensure that the current button overlaps and cover the other buttons displayed.
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

great solution and thanks for quick response! Just wondering where I would place my jquery code?
$('.container div').click(function(event){
$(this).toggleClass('active');
})
html, body{
width: 80%;
margin: 0 auto;
}
head{
text-align:left;
}
head, img{
width: 350px;
height: 100px;
float: left;
margin-bottom: 1%;
}
.container{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
button{
background-color: #cccccc;
color: #000000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
padding-left: 15%;
outline: none;
font-size: 17px;
margin-top: 2%;
position: relative;
}
button h3{
display: flex;
justify-content: space-around;
align-items: center;
}
.icon {
height: 2.5em;
width: 1.7em;
float: right;
}
.icon {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}
.container div.active{
height: 100%;
background-color: white;
position:absolute;
top:0;
left:0;
width: 100%;
z-index: 2;
}
.container div.active button{
height: 100%;
}
#first,#second,#third,#fourth,#last{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="second">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="third">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="fourth">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
<div id="last">
<button><h3>Random <div class ="icon" /></h3></button>
</div>
</div>

[EDIT]: You include jquery just before closing the body tag of your html document, and you write your javascript just bellow that. Like the following:
<body>
<!-- Here goes your page content -->
<!-- Here you include the jquery and any js you may need -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Here goes custom jquery code -->
<script>
$('.btn').click( function(){
$(this).parent().addClass("active")
})
</script>
</body>
I suggest you check the Stackoverflow rules:
https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?rq=1
Here is the simplified solution to your problem:
$('.btn').click( function(){
$(this).parent().addClass("active")
})
.elements-container {
position: relative;
}
.element {
float: left;
width: 25%;
background-color: grey;
text-align: center;
padding: 50px 0;
}
.element.active {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements-container">
<div class="element">
<button class="btn">Button 1</button>
</div>
<div class="element">
<button class="btn">Button 2</button>
</div>
<div class="element">
<button class="btn">Button 3</button>
</div>
<div class="element">
<button class="btn">Button 4</button>
</div>
</div>

Tricky div overlapping

I am trying to use z-index to overlap in this scenario, but I cannot achieve the results I am looking for.
Here is my code: https://jsfiddle.net/mx0zdpvm/.
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -100px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>
This is the result I am trying to achieve:
A CSS solution is preferred.

First change:
#redStripes{
position: relative;
top:60px;
right:280px;
z-index: 2;
}
If you want to overlap elements, divs, you need to specify position absolute or relative to something, otherwise the z-index will not work.
https://jsfiddle.net/scorpio777/mx0zdpvm/3/
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: relative;
top:50px;
right:280px;
z-index: 2;
}
#triangle{
position: static;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
left: -150px;
}
<div id="designWrapper">
<div id="design">
<div id="redStripes">
<div class="redStripeWrapper" id="redStripeWrapper1">
<div class="redStripe" id="red1">
red1
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper2">
<div class="redStripe" id="red2">
red2
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper3">
<div class="redStripe" id="red3">
red3
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper4">
<div class="redStripe" id="red4">
red4
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper5">
<div class="redStripe" id="red5">
red5
</div>
</div>
<div class="redStripeWrapper" id="redStripeWrapper6">
<div class="redStripe" id="red6">
red6
</div>
</div>
</div>
<div id="triangleWrapper">
<div id="triangle">
</div>
</div>
</div>
</div>

You cannot overlap elements if you don't set the position to absolute or relative.

This will sort the overlapping out. I set the position to relative and a z-index of 1 to the blue triangle, and 2 to the red strips, then adjusted the positioning with top and right. I will leave you to sort out the rest :)
body{
margin: 0;
background-color: #ffffff;
}
#designWrapper{
width: 60vw;
height: 100%;
float: right;
}
#redStripes{
position: static;
}
#triangle{
position: relative;
border-bottom: 25vw solid #ceecec;
border-left: 17.5vw solid #ffffff;
right: 0px;
top:-100px;
z-index:1;
}
.redStripe{
margin-bottom: 10px;
background-color: #e83c3c;
transform: rotate(25deg);
width: 200vw;
height: 35px;
position: relative;
z-index:2;
left: -100px;
}

Create an automatic slider

I created this code for a slider. When I hover the thumbnail image it shows me image, but I need to create an automatic slider. How can i do this?
/******************************************************************************************************/
.sliderconteainer {
width: 100%;
position: relative;
border: 2px double silver;
border-radius: 5px;
}
.thmbnail {
width: 25%;
height: 100px;
float: left;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
float: right;
left: 0;
top: 0;
opacity: 0;
}
.slide img {
height: 300px;
width: 100%;
}
.thmbnail img {
width: 100%;
height: 95%;
border: 2px solid #EEEEEE;
border-radius: 5px;
}
.content-placeholder {
width: 100%;
height: 300px;
}
.info {
background-color: black;
z-index: 99;
margin-top: -66px;
position: absolute;
width: 100%;
padding-right: 10px;
opacity: .75;
border-radius: 5px;
}
.info p {
color: #ABB3BD;
font-family: 'B Mitra';
}
.info h5 {
font-family: 'B Titr';
color: #ffffff;
}
.thmbnail:hover .slide {
opacity: 1;
}
.thmbnail:hover .thmbnail img {
border: 2px solid #56656E;
}
#main {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class=" sliderconteainer col-md-5 col-sm-5">
<div class="content-placeholder"></div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/SiteDesign/profile.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/8.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/8.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/image-slider-2.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/image-slider-2.jpg"/>
</div>
<div class="thmbnail ">
<div class="slide">
<img src="~/Image/Slider/Megumi-4565.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/Megumi-4565.jpg"/>
</div>
</div>
</div>

If you want to change things automatically, you can use the build-in JavaScript function setInterval(xfunction, xInterval), which calls xFunction, every xInterval
setInterval(function() {
console.log("MOVE IT");
moveLeft();
}, 1000);
As #dennis-koch mentioned, I would also have a look at plugins you may use for a slider.