所以我第一次尝试制作一个投资组合网站，但我在手机上进行了测试，才刚刚意识到右手边有一大块空白。但我很难弄清楚为什么会这样。我试着移动了一些页边空白和其他css功能，但不太清楚问题出在哪里，所有页面都有同样的问题。希望有人能帮我。(我知道这可能真的很愚蠢…(
图片示例：https://ibb.co/KXX8dbL
JUST索引页的HTML代码(所有其他页面的问题相同(
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/MJ.png">
<script src="index.js"></script>
</head>
<body>
<!--Screen loading-->
<div class="loader">
<img src="images/loading.gif" alt="Loading...">
</div>
<!--Scroll Top Button-->
<div class="scrollTop" onclick="scrollToTop()"></div>
<!--Scroll bar-->
<div id="progressbar"></div>
<div id="scrollPath"></div>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
<a href="contact.html">Contact Me</a>
</div>
<div class="nav-link-wrapper">
<a href="certifications.html">Certications</a>
</div>
<div class="nav-link-wrapper">
<a href="data.html">Data Data Data!</a>
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/white.jfif)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“Don’t limit yourself.<br>
Many people limit themselves to what they think they can do.<br>
You can go as far as your mind lets you.<br>
What you believe, remember, you can achieve.” – Mary Kay Ash
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/win.jfif)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“If people are doubting how far you can go,<br>
go so far that you can’t hear them anymore.” – Michele Ruiz
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/team.jfif)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“We need to accept that we won’t always make the right decisions,<br>
that we’ll screw up royally sometimes – understanding that failure is not the opposite of success,<br>
it’s part of success.” – Arianna Huffington
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“You’ve gotta dance like there’s nobody watching,<br>
love like you’ll never be hurt, sing like there’s nobody listening,<br>
and live like it’s heaven on earth.” ― William W. Purkey
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio3.jpg)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“Smart people learn from everything and everyone,<br>
average people from their experiences,<br>
stupid people already have all the answers.” – Socrates
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
“Do what you feel in your heart to be right – for you’ll be criticized anyway.”<br>
― Eleanor Roosevelt
</div>
</div>
</div>
</div>
</div>
</div>
<div id="parent2">
<div class="aboutme">
<h1>About Me</h1>
<p>Student at the University of Lincoln studying Computer Science (first year). A hard-working, responsible and enthusiastic learner. Always motivated with a willingness
to learn new attributes and obtain new business experiences. My main area of interest is data! specfically data analyst roles and business analyst roles, this has only arised
recently but as soon as I did research in these fields and talked some some well established professionals, it instantly sparked my interest.
</p>
</div>
<div class="pictureofme">
<img src="images/fb.png" alt="Avatar" width="300" height="300">
</div>
</div>
<!--Most Used Sites Section-->
<div class="wrapper">
<h1>Skills and tools I Have Experience With</h1>
<div class="tools">
<div class="websites">
<div class="site_img">
<a href="https://github.com/mathewsjoyy?tab=repositories"><img src="images/sql.png" alt="sql"></a>
</div>
<h3>SQL</h3>
<p class="role">Database communication tool</p>
<p>SQL stands for Structured Query Language. SQL lets you access and manipulate databases.
A query language is a kind of programming language that's designed to facilitate retrieving specific information from databases,
and that's exactly what SQL does. I have experience using MySQL and SSMS (SQL Server Management Studio).
</p>
</div>
<div class="websites">
<div class="site_img">
<a href="https://github.com/mathewsjoyy?tab=repositories"><img src="images/python.png" alt="python"></a>
</div>
<h3>Python</h3>
<p class="role">High-level programming language</p>
<p>Python is an interpreted, high-level and general-purpose programming
language. Python's design philosophy emphasizes code readability with its
notable use of significant indentation. I have learnt python at university, and have done
a couple intermediate/begineer projects including data analysis.</p>
</div>
<div class="websites">
<div class="site_img">
<a href="https://github.com/mathewsjoyy?tab=repositories"><img src="images/tableau-software.png" alt="tableau"></a>
</div>
<h3>Tableau</h3>
<p class="role">Data visualisation</p>
<p>Tableau is a powerful and fastest growing data visualization tool used in the Business Intelligence Industry.
It helps in simplifying raw data in a very easily understandable format. I have used this tool to produce
clear and easy to understand data visualisations for those with less understanding of the data.</p>
</div>
<div class="websites">
<div class="site_img">
<a href="https://github.com/mathewsjoyy?tab=repositories"><img src="images/csharp.png" alt="tableau"></a>
</div>
<h3>C#</h3>
<p class="role">High-level programming language</p>
<p>C# is an object-oriented programming language from Microsoft that aims to combine the computing power
of C++ with the programming ease of Visual Basic. My main exposure to this language is through university
where I strengthed my OOP skills through making intermediate console applications.</p>
</div>
</div>
</div>
<!--website footer-->
<div class="footer">
<div class="copyright"> 2021 Created By Mathews Joy</div>
</div>
</body>
</html>
完整CSS代码
/* Master Styles */
/* import font google api */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
* {
font-family: 'Poppins', sans-serif;
padding: 0;
margin: 0;
}
@viewport {
width: device-width;
zoom: 1.0 ;
}
/* Scroll bar */
::-webkit-scrollbar {
width: 0;
}
#scrollPath {
position:Fixed;
top: 0; right: 0; width:10px; height:100%;
background: rgba(255,255,255,0.04);
}
#progressbar {
position:Fixed;
top: 0; right: 0; width:10px; height:100%;
background: linear-gradient(to top, silver, aliceblue);
animation: animate 5s linear infinte;
z-index: 1;
}
@keyframes animate {
0%,100%
{
filter: hue-rotate(0deg);
}
50%
{
filter: hue-rotate(360deg);
}
}
#progressbar:before{
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to top, silver, aliceblue);
filter: blur(20px);
}
#progressbar:after{
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(to top, silver, aliceblue);
filter: blur(20px);
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 30px;
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
color: black;
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
text-decoration: none;
transition: color 0.5s;
color: black;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color:black;
}
.brand {
color: black;
}
.brand:hover{
border-bottom: 1px solid black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px; padding-right: 100px;
}
.img-text-wrapper .subtitle {
transition: 1s;
font-weight: 600;
color: transparent;
text-align: center;
}
.img-text-wrapper:hover .subtitle {
font-weight: 600;
color: white;
}
.img-darken {
transition: 1s;
filter: brightness(10%);
}
/* about me */
#parent2 {
display: flex;
padding: 5px;
align-items: center;
justify-content: center;
margin-top: 230px;
height: 350px;
}
.aboutme {
margin-left: 300px;
margin-right: 200px;
font-size: 18px;
padding: 40px;
background: #f5f7f8;
border-radius: 10px;
height:70%;
width:100%;
overflow: auto;
text-overflow: ellipsis;
}
.aboutme h1 {
color: #000;
margin:0 0 30px 0;
text-transform: uppercase;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
}
.aboutme h1:hover {
-webkit-text-fill-color: black;
}
.pictureofme img{
width: 300px;
margin-left: -220px;
margin-right: 300px;
}
/* Most used sites section */
.wrapper {
margin: 0;
padding: 3%;
box-sizing: border-box;
background: white;
margin-top: 10%;
height: 100%; width: 100%;
}
.wrapper h1 {
font-size: 40px;
text-align: center;
margin-bottom: 60px;
padding-bottom: 2%;
text-transform: uppercase;
color: #000;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
}
.wrapper h1:hover {
-webkit-text-fill-color: black;
}
.tools {
display: flex;
text-align: center;
width:auto;
justify-content: center;
flex-wrap: wrap;
}
.tools .websites {
background: white;
margin: 5px;
width: 300px;
margin-bottom: 50px;
padding: 20px;
line-height: 25px;
position: relative;
border-radius: 10%;
box-shadow: 0 2px 8px 0 rgb(0 0 0 / 20%);
}
.tools .websites h3 {
font-size: 30px;
text-transform: uppercase;
margin-top: 50px;
}
.tools .websites p.role {
font-size: 15px;
text-transform: uppercase;
margin: 12px 0;
}
.tools .websites .site_img {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
background: white;
}
.tools .websites .site_img img {
width: 100px;
height: 100px;
padding: white;
}
/* footer */
.footer {
background-color:grey;
text-align: center; color: white;
padding: 3px;
position:fixed;
left:0; bottom:0; width: 100%; height: 20px;
opacity: 0.5;
z-index: 1;
}
.copyright {
float: left
}
/* CONTACT PAGE CSS STYLES */
.connect {
width: 80%;
margin:50px auto;
text-align: center;
padding-top: 50px;
}
.connect h1{
color: #4169E1;
}
.connect p{
margin-bottom: 15px;
}
.contact-box{
display:flex;
}
.contact-left {
flex-basis: 60%;
padding: 40px 60px;
background: white;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}
.contact-right {
flex-basis: 40%;
padding: 40px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}
.input-row {
display:flex;
justify-content: space-between;
margin-bottom: 20px;
}
.input-row .input-group {
flex-basis: 45%;
}
input{
width:100%;
border:none;
border-bottom: 1px solid black;
outline:none;
padding-bottom: 5px;
}
.textarea{
width: 100%;
padding: 10px;
outline: none;
border:1px soild black;
box-sizing:border-box;
}
label {
margin: 6px;
display:block;
color: purple;
}
button{
border: none;
outline: none;
width: 100%;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}
.contact-left h3{
color: forestgreen;
font-weight:600;
margin-bottom:30px;
}
.contact-right h3{
color:forestgreen;
font-weight:600;
margin-bottom:30px;
}
tr td:first-child {
padding-right: 20px;
}
tr td{
padding-top: 20px;
}
.contacts {
display: flex;
justify-content: space-around;
padding: 10px;
font-size: 18px;
padding-bottom: 200px;
}
.contacts .facebook {
color: blue;
}
.contacts .instagram {
color: orangered;
}
.contacts .linkedin {
color: steelblue;
}
.contacts .gmail {
color: red;
}
/* Certications Page */
.title-box {
margin:auto 50px;
text-align: center;
margin-top: 90px;
padding-bottom: 20px;
}
.title-box h1{
color: purple;
}
.certications-box {
width: 200px;
height: 198px;
border-radius: 4px;
margin-bottom: 30px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
padding: 20px;
position: relative;
}
.certications-box img{
width: 100px;
position: absolute;
top: 20px;
right: 20px;
border-radius: 4px;
transition: .5s;
}
.certications-box h4{
margin-top: 25px;
margin-bottom: 5px;
color: #2196f3;
}
small {
color: #555;
}
.break-box {
margin: 50px auto 20px;
border-radius: 3px;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}
.certications-box p{
text-align: center;
font-size: 16px;
}
.certications-row {
display: grid;
grid-template-columns: auto auto auto;
justify-content: space-around;
flex-wrap: wrap;
margin: auto;
padding: 60px;
}
.certications-box img:hover{
width: 198px;
}
/* Video Text */
.banner2 {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
display:flex;
justify-content: center;
text-align: center;
}
.banner2 video{
width: 100%; height: 100%;
object-fit: cover;
top: 0;
left: 0;
}
.banner2 h2 {
top: 0; left: 0; width: 100%; height: 100%;
position: absolute;
background: #fff;
font-size: 30vw;
text-transform: uppercase;
text-align:center;
line-height: 45vh;
color: #000;
mix-blend-mode:screen;
}
.banner3 {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
display:flex;
justify-content: center;
text-align: center;
}
.banner3 video{
width: 100%; height: 100%;
object-fit: cover;
top: 0;
left: 0;
}
.banner3 h2 {
top: 0; left: 0; width: 100%; height: 100%;
position: absolute;
background: #fff;
font-size: 20vw;
text-transform: uppercase;
text-align:center;
line-height: 45vh;
color: #000;
mix-blend-mode:screen;
}
/* Scroll to top button */
.scrollTop {
position: fixed;
bottom: 800px;
height: 60px;
width: 40px;
right: 40px;
background: #fff url(images/up.png);
border-radius: 50%;
background-size: 40px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
z-index: 10;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.scrollTop.active {
bottom: 40px;
visibility: visible;
opacity: 1;
}
/* POWERPOINT */
.powerpoint {
padding: 90px;
}
/* THANK YOU PAGE */
.thank-you {
justify-content: center;
text-align: center;
font-size: 230%;
padding-top: 18%;
}
/* ANALYSIS PAGE */
.twitter {
display: grid;
padding: 90px;
margin: auto;
width: 66%;
grid-template-columns: auto auto auto;
justify-content: space-between;
flex-wrap: wrap;
}
.data #main-header{
padding-right: 17%;
padding-left: 17%;
margin-left: auto;
margin-right: auto;
padding-top: 4%;
font-size: 50px;
text-align: center;
color: #000;
text-transform: uppercase;
}
.data #main-header:hover {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0.5px;
}
.data .data-inner {
padding-right: 25%;
padding-left: 25%;
margin-left: auto;
margin-right: auto;
padding-top: 3%;
padding-bottom: 5%;
}
.data .data-inner #first-header{
color: green;
}
.data .data-inner #second-header{
color: salmon;
}
.data .data-inner #third-header{
color: blue;
}
.data .data-inner img{
display: block;
padding: 4%;
margin-left: auto;
margin-right: auto;
width: 68%;
}
.data .data-inner iframe{
display: block;
padding: 4%;
margin-left: auto;
margin-right: auto;
width: 68%;
height: 330px;
}
/* SCREEN LOADER */
.loader {
position: fixed;
z-index: 99;
top: 0;
left: 0;
width:100%;
height:100%;
background: white;
display:flex;
justify-content: center;
align-items:center;
}
.loader > img {
width: 100px;
}
.loader.hidden{
animation:fadeOut 1s;
animation-fill-mode: forwards;
}
@keyframes fadeOut{
100%{
opacity: 0;
visibility: hidden;
}
}
JAVASCRIPT完整
// For Loading screen
window.addEventListener('load', function(){
const loader = document.querySelector(".loader");
loader.className += " hidden"; // class loaderhidden
});
// For the hover animations at start of the page
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => {
portfolioItem.addEventListener('mouseover', () => {
portfolioItem.childNodes[1].classList;
portfolioItem.childNodes[1].classList.add('img-darken');
})
portfolioItem.addEventListener('mouseout', () => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
// For Progress bar
let progress = document.getElementById('progressbar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function(){
let progressHeight = (window.pageYOffset / totalHeight) * 100;
progress.style.height = progressHeight + "%";
}
// Custom cursor
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})
document.addEventListener('click', () => {
cursor.classList.add("expand");
setTimeout(() => {
cursor.classList.remove("expand");
}, 400)
})
// Scropp up top button
window.addEventListener('scroll', function(){
var scroll = document.querySelector('.scrollTop');
scroll.classList.toggle("active", window.scrollY > 500)
})
function scrollToTop(){
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
您必须使用媒体查询来为移动设备做出响应布局查看本文中的媒体查询https://www.w3schools.com/cssref/css3_pr_mediaquery.asp也可以将此添加到您的通用选择器中
*{
width: auto;
overflow-x: hidden;
}
通过将宽度设置为auto，所有元素将占用所有可用空间，通过添加overflow-x:hidden，它将隐藏溢出viewport或屏幕的元素你可以通过输入以下代码来制作响应图像网格
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
查看这篇文章中的响应网格图像https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp