javascript - 我的整个网站在响应模式下被推到左边如何找到问题？
问题描述
我的整个网站将内容推向左侧，通常是由于语法错误，但我真的找不到我的问题，请帮助我是初学者，我的代码有很多噪音，我已经在多个格式化程序和验证器网站中运行了 html 和 css仍然没有找到任何东西我还删除了所有媒体查询以确保问题是否解决但没有运气请帮助我。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: visible;
scroll-behavior: smooth;
}
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 2;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
width: 100%;
}
/*Button Back To Top-----------------------------------------------------------------------*/
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #f10e32; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #d19ea6;
}
/*NAVBAR --------------------------------------------------------------------------------------*/
.navbar {
top: 0;
width: 100%;
height: auto;
background: #18191a;
display: flex;
justify-content: center;
align-content: center;
z-index: 2;
transition: top 0.3s;
}
.mylist {
height: 100%;
width: 500px;
display: flex;
justify-content: center;
align-content: center;
font-family: "Montserrat", sans-serif;
font-weight: 600;
}
.icons {
width: 100%;
height: 100%;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.icons a {
text-decoration: none;
color: rgb(180, 148, 158);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.icons:hover {
opacity: 0.7;
}
.icon {
width: 35px;
height: auto;
}
/*INFO -------------------------------------------------------------------------------------------*/
.head-info {
background-color: rgba(134, 128, 128, 0.035);
width: 70%;
border-radius: 10px;
}
.info {
margin-top: 100px;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Roboto", sans-serif;
text-align: center;
}
.info p {
color: rgb(218, 214, 214);
line-height: 25px;
margin: 5px 150px;
font-family: "Montserrat", sans-serif;
font-size: 15px;
}
h1 {
color: rgb(177, 164, 164);
font-weight: 300;
margin-bottom: 5px;
}
h2 {
color: rgb(192, 184, 153);
font-weight: 400;
margin-bottom: 30px;
}
h3 {
font-size: 20px;
color: crimson;
font-weight: 500;
}
.btn {
margin: 80px 0 0 0;
font-family: "Roboto", sans-serif;
background: #f10e32;
border: none;
width: 136px;
height: auto;
outline: none;
overflow: hidden;
font-size: 16px;
padding: 10px;
color: rgb(198, 181, 181);
border-radius: 5px;
cursor: pointer;
scroll-behavior: smooth;
z-index: 1;
margin-bottom: 300px;
}
.btn:hover {
opacity: 0.7;
color: black;
transition: 0.3s ease-in;
text-decoration: none;
}
/*PROJECTS---------------------------------------------------------------------------------------*/
.projects {
scroll-behavior: smooth;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(134, 128, 128, 0.035);
border-radius: 10px;
}
.projects h4 {
display: none;
}
.one,
.two,
.three {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
scroll-behavior: smooth;
position: relative;
}
.images {
margin: 10px;
cursor: pointer;
width: 320px;
height: 220px;
border-radius: 4px;
}
h5 {
position: relative;
right: 200px;
top: 5px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h5 {
visibility: hidden;
}
#first,
#second,
#third,
#fourth,
#fifth,
#sixth,
#seventh
{
position: relative;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(22, 22, 22, 0.705);
opacity: 0;
transition: 0.3s ease;
cursor: pointer;
}
.overlay p {
font-family: "Roboto", sans-serif;
font-size: 23px;
font-weight: 500;
color: #daced0;
}
.overlay:hover {
opacity: 1;
}
/*Summery and Skills -------------------------------------------------------------*/
.about {
background-color: rgba(134, 128, 128, 0.035);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 200px;
margin-bottom: 30px;
font-family: "Montserrat", sans-serif;
padding: 70px;
border-radius: 20px;
}
.about h3 {
font-size: 20px;
font-weight: 500;
}
.about p {
color: rgb(218, 214, 214);
line-height: 25px;
margin: 5px 150px;
font-family: "Montserrat", sans-serif;
font-size: 15px;
}
.skills {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
margin-top: 100px;
}
.skill {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
}
.skill a {
text-decoration: none;
color: rgb(180, 148, 158);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px;
transition: 0.3s ease;
}
.skill a:hover {
transform: translateY(-20px);
}
/*CONTACTS ----------------------------------------------------------------------------------------*/
.contact {
background-color: rgba(255, 0, 0, 0.096);
width: 100%;
height: 400px;
text-align: center;
}
.contacts h3 {
text-align: center;
font-size: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
#centrada{
margin: 50px auto 0px auto;
width:300px;
font-family: 'Verdana';
font-weight: bold;
text-align: center;
}
.utopix{
padding-bottom:50px;
}
a{
color:#fff;
text-decoration:none;
}
.cube {
width: 100%;
height: 50px;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
cursor: pointer;
}
.default-state,.active-state {
height: 50px;
}
.cube +.cube{
margin:10px 0px;
}
.default-state {
-webkit-transform: translateZ(25px);
-moz-transform: translateZ(25px);
-o-transform: translateZ(25px);
-ms-transform: translateZ(25px);
transform: translateZ(25px);
}
.flip-to-top .active-state {
-webkit-transform: rotateX(90deg) translateZ(75px);
-moz-transform: rotateX(90deg) translateZ(75px);
-o-transform: rotateX(90deg) translateZ(75px);
-ms-transform: rotateX(90deg) translateZ(75px);
transform: rotateX(90deg) translateZ(75px);
}
.flip-to-bottom .active-state {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
-moz-transform: rotateX(-90deg) translateZ(-50px);
-o-transform: rotateX(-90deg) translateZ(-50px);
-ms-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
.cube.flip-to-top:hover {
-webkit-transform: rotateX(-89deg);
-moz-transform: rotateX(-89deg);
-o-transform: rotateX(-89deg);
-ms-transform: rotateX(-89deg);
transform: rotateX(-89deg);
}
.cube.flip-to-bottom:hover {
-webkit-transform: rotateX(89deg);
-moz-transform: rotateX(89deg);
-o-transform: rotateX(89deg);
-ms-transform: rotateX(89deg);
transform: rotateX(89deg);
}
.cube {
text-align: center;
margin: 0 auto;
}
.default-state,
.active-state {
font-size: 16px;
color: #fff;
line-height: 50px;
-webkit-transition: background 250ms ease;
-moz-transition: background 250ms ease;
-o-transition: background 250ms ease;
transition: background 250ms ease;
}
.cube:hover .default-state {
background: #000;
}
.facebook {
background: #016d1f;
}
.twitter {
background: #0ec90b;
}
.google-plus {
background: #c01a04;
}
.linkedin {
background:#0590db;
}
.instagram {
background-color: #da4273;
}
/*MEDIA ------------------------------------------------------------------------------------------*/<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
</head>
<body>
<div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<nav id="navbar" class="navbar">
<ul class="mylist" >
<li class="icons" title="HOME">
<a href="./index.html"><img class="icon" src="./images/home.png" alt="">
Home
</a>
</li>
<li class="icons" title="resume">
<a href="download=""><img class="icon" src="./images/Resume.png" alt="">
Get Resume
</a>
</li>
<li class="icons" title="ABOUT ME">
<a href="#about"><img class="icon" src="./images/about.png" alt="Todo List">
About
</a>
</li>
<li class="icons" title="CONTACT ME">
<a href="#contacts"><img class="icon" src="./images/contact-book.png" alt="">
Contacts
</a>
</li>
</ul>
</nav>
<div class="info">
<div class="head-info">
<h1></h1>
<h2>Front-End Developer</h2>
<h3>Objective</h3>
<p>As a Front-End Developer, to be responsible for producing high quality solutions for company customers; bringing growing understanding of Modern HTML, JavaScript, and CSS, and passionate ability to learn and develope while working in the team of experts under a skillful and talented management.
</div>
<a class="btn" href="#first">VIEW PROJECTS</a>
</div>
<div id="projects" class="projects">
<div id="first-div" class="one">
<div id="first" class="image-container">
<a href="./projects/color-flipper/index.html" target="_blank">
<img src="./images/projects/Color-flipper.png" class="images" alt="Color Flipper">
<div class="overlay"><p>Color Flipper</p></div>
<h4>Color Flipper</h4>
</a>
</div>
<div id="second" class="image-container">
<a href="./projects/Comment/index.html" target="_blank">
<img src="./images/projects/secrets.png" class="images" alt="Secrets">
<div class="overlay"><p>Secrets</p></div>
<h4>Secrets</h4>
</a>
</div>
<div id="third" class="image-container">
<a href="./projects/counter/index.html" target="_blank"
><img src="./images/projects/counter.png" class="images" alt="Counter">
<div class="overlay"><p>Counter</p></div>
<h4>Counter</h4>
</a>
</div>
</div>
<div class="two">
<div id="fourth" class="image-container">
<a href="./projects/Login-page/index.html" target="_blank">
<img src="./images/projects/login.png" class="images" alt="Login">
<div class="overlay"><p>Login Page</p></div>
<h4>Login-Page</h4>
</a>
</div>
</div>
<div class="three">
<div id="fifth" class="image-container">
<a href="./projects/Random Quotes/index.html" target="_blank">
<img src="./images/projects/quotes.png" class="images" alt="Quotes">
<div class="overlay"><p>Random Quotes</p></div>
<h4>Random Quotes</h4>
</a>
</div>
<div id="sixth" class="image-container">
<a href="./projects/responsive-header/index.html" target="_blank">
<img src="./images/projects/header.png" class="images" alt="Movies">
<div class="overlay"><p>Movies</p></div>
<h4>Movies</h4>
</a>
</div>
<div id="seventh" class="image-container">
<a href="./projects/todo-list/index.html" target="_blank">
<img src="./images/projects/todo.png" class="images" alt="">
<div class="overlay"><p>Todo List</p></div>
<h4>Todo-List</h4>
</a>
</div>
</div>
</div>
<div id="about" class="about">
<h3>Summery</h3>
<p>With over 5 years of experience in English translation I have decided to change my career into something more rewarding and futureproof such as web development.
So as of 2019 I have trained online to become a front-end web developer and covered various topics such as responsive web design, vanilla JavaScript web application basics and user friendly UI and UX design.
</p>
<div class="skills">
<h3>Skills</h3>
<div class="skill">
<a href="https://en.wikipedia.org/wiki/HTML#:~:text=The%20HyperText%20Markup%20Language%2C%20or,scripting%20languages%20such%20as%20JavaScript."><img src="./images/skills/html.png" alt=""><br>HTML</a>
<a href="https://en.wikipedia.org/wiki/CSS"><img src="./images/skills/css.png" alt=""><br>CSS3</a>
<a href="https://en.wikipedia.org/wiki/JavaScript"><img src="./images/skills/js.png" alt=""><br>JAVASCRIPT</a>
<a href="https://en.wikipedia.org/wiki/Git"><img src="./images/skills/git.png" alt=""><br>Git</a>
<a href="https://en.wikipedia.org/wiki/Figma_(software)"><img src="./images/skills/figma.png" alt=""><br>Figma</a>
<a href="https://en.wikipedia.org/wiki/WordPress"><img src="./images/skills/wordpress.png" alt=""><br>Wordpress</a>
<a href="https://en.wikipedia.org/wiki/Adobe_Photoshop"><img src="./images/skills/photoshop.png" alt=""><br>Photoshop</a>
<a href="https://en.wikipedia.org/wiki/Microsoft_Word"><img src="./images/skills/word.png" alt=""><br>Word</a>
<a href="https://en.wikipedia.org/wiki/Microsoft_Excel"><img src="./images/skills/excel.png" alt=""><br>Excell</a>
<a href="https://en.wikipedia.org/wiki/Microsoft_PowerPoint"><img src="./images/skills/powerpoint.png" alt=""><br>Powerpoint</a>
</div>
</div>
</div>
<div id="contacts" class="contacts">
<h3>Contact Me</h3>
<div id="centrada">
<div class="cube flip-to-top">
<div class="default-state facebook">
<span>Phone</span>
</div>
<div class="active-state facebook">
<span><a href="tel:123-456-7890" target="_blank">+98-0990-136-91-46</a></span>
</div>
</div>
<div class="cube flip-to-top google-plus">
<div class="default-state">
<span>Gmail</span>
</div>
<div class="active-state google-plus">
<span><a>naeimipoor.a@gmail.com</a></span>
</div>
</div>
<div class="cube flip-to-top twitter">
<div class="default-state">
<span>Whatsapp</span>
</div>
<div class="active-state twitter">
<span><a href="https://wa.me/+9809901369146">+98-990-136-91-46</a></span>
</div>
</div>
<div class="cube flip-to-top">
<div class="default-state linkedin">
<span>Linkedin</span>
</div>
<div class="active-state linkedin">
<span><a href="https://www.linkedin.com/in/ashkan-naeimipoor-7b655316a" target="_blank">Ashkan Naeimipoor</a></span>
</div>
</div>
</div>
</div>
</div>
<script>
/*NAVBAR JAVASCRIPT-----------------------------------------*/
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
/*BACK ON TOP BUTTON JAVASCRIPT------------------------------------------------*/
//Get the button:
mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
</body>
</html>解决方案
添加flex-wrap:wrap_.skill
.skill {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
flex-wrap: wrap; /*Add Here*/
}
推荐阅读
- javascript - 如何使用 Webpack 更正其他 scss 中的 @import scss 文件
- mysql - MySQL Min Max 扣除
- android - 加载长 xml 时自定义对话框延迟应用程序
- jquery - 如何在不使用 jQuery 的情况下在 BLOGGER (blogspot) 中延迟加载图像？
- javascript - 如何在动态表单的输入元素中添加onload
- php - AJAX调用后PHP自动加载无法找到类文件
- git - 'git request-pull' 不会生成对源的拉取请求
- python-3.x - 用于将 2 个不同列表的 2 个元素彼此相邻附加的列表理解
- go - 从函数返回的正确方法是什么？
- javascript - 如何使用静态关键字定义带参数的单例模式？