时间戳

首页 > 解决方案 > 如何摆脱 html 移动网站上的大空白块？

javascript - 如何摆脱 html 移动网站上的大空白块？

问题描述

所以我第一次尝试制作一个投资组合网站，但是我来在移动设备上对其进行测试，只是意识到右侧有一大块空白区域。但我正在努力弄清楚为什么这是我尝试移动一些边距和其他 css 功能但不能完全看到问题所在，并且所有页面上的问题都是相同的。希望可以有人帮帮我。（我知道它可能真的很愚蠢......）

图片示例：https ://ibb.co/KXX8dbL

仅索引页面的 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.”&lt;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'
    })
}

标签： javascripthtmlcssweb

解决方案

您必须使用媒体查询来为移动设备制作响应式布局检查这篇文章以了解媒体查询https://www.w3schools.com/cssref/css3_pr_mediaquery.asp 也将其添加到您的通用选择器中

*{
  width: auto;
  overflow-x: hidden;
}

通过将宽度设置为自动所有元素将占用所有可用空间并通过添加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

推荐阅读