Resizing Screen: Messes up sections on website - Artificial Intelligence

ShivaniAhuja
June 15, 2020
94 views
2 votes
3 Answers

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> <a href="#about-me"> ABOUT ME </a></li>
				<li> <a href="#experience"> EXPERIENCE</a></li>
				<li> <a href="#blog"> BLOG POSTS</a></li>
				<li> <a href="#photography">PHOTOGRAPHY</a></li>
				<li> <a href="#contact"> CONTACT </a></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><a href="#" class="fa fa-lg fa-facebook"></a></li>
<li><a href="#" class="fa fa-lg fa-github"></a></li>
<li><a href="#" class="fa fa-lg fa-linkedin"></a></li>
<li><a href="https://www.instagram.com/_shivaniahuja/?hl=en" class="fa fa-lg fa-instagram"></a></li>
<li><a href="#" class="fa fa-lg fa-youtube"></a></li> 
</ul>
</div>
</div>

  </section>

  <section id="footer">
  	<p id="footer-paragraph"> Copyright @2020 Shivani Ahuja. All Rights Reserved.
  </section>

</div>

</body>
</html>

Answers

- BarajaSwargiary
- June 15, 2020 at 3:45 am
- 0 votes
0
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">
     
     <div align="center" class="socialbtns">
         
     </div>
</div>
  </section>

  <section id="footer">
    <p id="footer-paragraph"> Copyright @2020 Shivani Ahuja. All Rights Reserved.
  </section>

</div>
```
Login or Signup to reply.

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

- user13633609
- June 15, 2020 at 4:12 am
- 0 votes
0
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">
     
     <div align="center" class="socialbtns">
         
     </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
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Resizing Screen: Messes up sections on website – Artificial Intelligence

Answers