调整大小屏幕-显示网站HTML / CSS问题上的部分

问题描述 投票:0回答:3

我创建一个网站并被困,因为我一直在调整屏幕大小并试图使其变得便于移动。但是,我似乎无法修复两个部分。我不记得在调整屏幕大小时如何使前三个部分停止移动。我想知道是否能得到一些帮助。

我的网站是shivaniahuja.com

如果查看“与我联系”页面和页脚并尝试调整它们的大小,则会看到问题。请让我知道您是否可以提供帮助,如有需要,我可以附上我的代码。谢谢!

*{

	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>
javascript html css
3个回答
0
投票

我发现一个不一致的地方是您包裹了div标签...这通常会导致布局错误,仅仅是因为无法正确关闭标签。

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

0
投票

为了使整个站点都具有响应性,请在<meta>标记前后放置一个<body>标记,如下所示。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

接下来,像这样设置您的HTML:

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

当然也要使用我提到的<meta>标签


0
投票

相对于.polaroid画廊的位置

.polaroid-gallery {
  position: relative;
  display:-ms-grid;
  display:grid;
  -ms-grid-columns: 25% 25% 25% 25%; 
  grid-template-columns: 23% 23% 23% 23%; 
  margin-left: 5%
}	

我建议您检查html的结构

© www.soinside.com 2019 - 2024. All rights reserved.