移动视图右侧不需要的空白区域 [英] Unwanted white space on right side in mobile view
本文介绍了移动视图右侧不需要的空白区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于我的投资组合网站，我在移动视图的右侧看到一个空白(仅适用于chrome)，而在桌面和Mozilla移动视图中则显示为空白.在这里，我附上了它的屏幕截图.
For my portfolio site I see a white space to the right side in the mobile view(only in chrome) and its fine in desktop and Mozilla mobile view. Here I am attaching the screenshot of it.
html {
scroll-behavior: smooth;
margin: 0px !important;
padding: 0px !important;
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0px !important;
padding: 0px !important;
font-family: 'Montserrat', sans-serif;
position: relative;
}
#preloader {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(51, 51, 51, 1);
z-index: 999;
}
.spinner {
width: 80px;
height: 80px;
border: 2px solid #f3f3f3;
border-top: 3px solid #f25a41;
border-radius: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.navbar-default {
transition: 500ms ease;
background-color: transparent;
}
.navbar-default.scrolledDown {
background: #333333;
}
#navbarContainer {
margin: 0px !important;
padding: 0px !important;
width: 100%;
left: 0;
z-index: 100;
}
.active {
color: #f73c56 !important;
border-bottom: 3px solid #f73c56 !important;
}
video {
width: 100%;
object-fit: contain;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
display: inline-block;
vertical-align: baseline;
}
/* @media (min-aspect-ratio: 16/9) {
.video {
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
.video {
width: auto;
height: 100%;
}
} */
h1 {
font-family: 'Fjalla One', sans-serif;
font-weight: bold;
}
.banner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
text-align: center;
color: #333;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);
text-shadow: 2px 2px 4px #666;
}
.actualText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100% !important;
z-index: 5;
margin: 0px !important;
padding: 0px !important;
}
.typedText {
color: #e60000;
}
@media screen and (max-width: 552px) {
.banner {
position: absolute;
top: 20%;
width: 100%;
height: 20%;
background-image: none;
background-color: rgba(235, 235, 235, 0.4);
padding: 0%;
}
}
@media screen and (max-width: 375px) {
.banner {
position: absolute;
top: 15%;
font-size: 10px !important;
width: 100%;
height: 20%;
background-image: none;
background-color: rgba(235, 235, 235, 0.4);
padding: 0%;
}
}
hr {
height: 1px;
display: block;
width: 50%;
background-image: -webkit-linear-gradient(left, #fff, #ccc, #fff);
}
<body data-spy="scroll" data-target=".navbar" data-offset="55">
<div id="preloader">
<div class="spinner"></div>
</div>
<!-- ----------NAVBAR---------- -->
<nav
class="navbar navbar-expand-md fixed-top navbar-default navbar-dark"
id="navbarContainer"
>
<a class="navbar-brand" href="#top">Tathagat</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarContent"
aria-label="Toggle Navigation"
aria-controls="navbar supported content"
aria-expanded="false"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarContent"
>
<ul class="navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link active" href="#homeSection">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutSection">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workSection">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skillsSection">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#timeLineSection">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resumeSection">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contactMe">Contact</a>
</li>
<li>
<button class="btn btn-dark" id="myBtn" onclick="myFunction()">
Pause
</button>
</li>
</ul>
</div>
</nav>
<!-- ----------Content---------- -->
<div class="homeSection" id="homeSection">
<div class="video-container">
<video autoplay loop id="bgVideo" poster="./media/bgVideoPoster.png">
<source src="./media/bgVideo.mp4" type="video/mp4" />
</video>
<div class="banner">
<div class="actualText">
<h1>Hi There !</h1>
<h1>I am <span class="typedText"></span></h1>
</div>
</div>
</div>
</div>
<div class="aboutSection mb-4" id="aboutSection">
<div class="container p-3">
<div class="row text-center">
<div class="col mb-3 spacerClass">
<h1
data-aos="fade-down"
data-aos-delay="50"
data-aos-duration="2000"
>
About Me
</h1>
<hr />
</div>
</div>
<div class="row">
<div
class="col-sm-6 p-2 text-center"
data-aos="fade-right"
data-aos-delay="50"
data-aos-duration="2000"
>
<img
src="./media/img/myPhoto.jpg"
height="300"
width="300"
alt="Tathagat Mohanty"
style="
-webkit-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.75);
"
/>
</div>
<div
class="col-sm-6 text-center"
data-aos="fade-left"
data-aos-delay="50"
data-aos-duration="2000"
>
<h4 class="mt-3">
Hello this is Tathagat Mohanty. I am a Web Developer by profession
with 2+ years of experience in this fast paced IT Industry.
</h4>
<h5 class="text-muted mt-3">
I am an astute learner skilled in FrontEnd Technologies. I believe
Design is something which is very personal and individual. With
that in mind I try to develop websites for multiple types of end
users with an approachable and clean design.
</h5>
</div>
</div>
</div>
</div>
我已在代码段中发布了HTML正文和CSS的开始部分，以供参考. 谁能帮我猜猜是什么原因造成的.我尝试过ghost css方法来检查是否有任何元素超出视口宽度，但找不到任何元素.预先感谢.
I have posted the starting part of the HTML Body and CSS in the snippet for reference. Can anyone please help me with the guess whats causing this. I have tried the ghost css method to check if any element is exceeding the viewport width but couldnt find any. Thanks in advance.
推荐答案
我认为您的页面上可能有一个元素的宽度和填充或边距超过100％. 当检查"页面并将鼠标悬停在空白处时，您可以在其中选择要在所需页面之外的元素.
I think there might be one element on your page which might have a width and a padding or margin exceeding 100%. When 'inspecting' the page and hover over the white space you might select an element there which is going outside of the wanted page.
尝试使用inspect元素查找并通过使用媒体查询在CSS中对其进行更改
Try and find this using the inspect element and change this in CSS with using media queries
这篇关于移动视图右侧不需要的空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
