Bollate

HTML

[ANSWERED] javascript – Resizing Screen: Messes up sections on website

By

Nov 20, 2022 , ,

Solution 1 :

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 ? -->

Solution 2 :

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

Solution 3 :

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

Problem :

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:[email protected]&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected]&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Lato:[email protected]&display=swap" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:[email protected]&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>

Comments

Comment posted by getbootstrap.com/docs/4.0/layout/grid

Please provide the code you want to correct. From what I see you are using bootstrap, you could start by reading about grid system

Comment posted by Shivani Ahuja

Just posted the code below! Thanks for any help you provide!

Comment posted by accepted

@ShivaniAhuja We don’t edit the question title to mark a question as solved here; we click the checkmark outline under the down-vote button of an answer to indicate it was solved. If you solved the problem yourself, consider posting an answer and marking that answer as

Comment posted by Shivani Ahuja

Hey, the layout is actually not too buggy there. I was messing around with wrapper tags to try to fix the resizing problem. If you go on shivaniahuja.com and try to resize the contact me page, everything starts overlap.

Comment posted by Baraja Swargiary

I don’ t know but did you try to remove the div tag ? The above problem. I have not found any overlap problem on your website anyways.

Comment posted by Shivani Ahuja

When you resize it to a super small length, the contact me page and the footer begin to overlap. Sorry, it’s a minor overlap, but it’s a big deal to me.

Comment posted by Shivani Ahuja

Just to clarify, I copy and paste this meta tag twice, right? Before the body tags and after the body tags in html file. Thanks so much I’ll let you know if it works!

Comment posted by Shivani Ahuja

Hi! I tried that, but when I resize it, but it still does the same thing.

Comment posted by Shivani Ahuja

It still overlaps when i resize it! WHen I use position relative, the words for contact go underneath the polaroids, but the sections shouldn’t be overlapping in the first place, which is why I am confused.

Comment posted by Roberto Vargas

please try that, and check your js, maybe you have some style set in #contact, this time the menu is fixed size and the contact to

By

Related Post

HTML

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022
HTML

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

Nov 20, 2022
HTML

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022

You missed

HTML

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

Nov 20, 2022
HTML

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

Nov 20, 2022
HTML

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

Nov 20, 2022
HTML

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

Nov 20, 2022