CODEWITHSUNDEEP
htmlcssbootstrap-4responsive-design
MMR
MMR

Reputation: 3009

Unwanted white space on right side in mobile view

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.

Chrome Issue

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>

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.

Upvotes: 31

Views: 84814

Answers (7)

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92367

Sticky top bar

If you want to have (position) sicky top bar then hidden value will break it. So use clip instead.

html,body{
    overflow-x: clip;
}

Example with clip

html,body { 
  overflow-x: clip;
}

body {margin:0;}

.topBar {
  top: 0;
  position: sticky;
  background: yellow;
  z-index: 10;
}

.content {
  width: 100%;
  height: 200vh;
  font-size: 100px;
  background: linear-gradient(to bottom, white, red);  
}

.rightBox {
  width: 200px;
  height: 200px;
  position: absolute;
  right: -100px;
  top: 100px;
  background: red;
  font-size: 20px;
}
<div class="topBar">
  <div> Top bar</div>
</div>

<div>


<div class="content">
  <div>My content</div>
  <div class="rightBox">it goes out</div>
</div>
</div>

If we use hidden in above snippet - then it will broke our sticky topbar:

html,body { 
  overflow-x: hidden;
}

body {margin:0;}

.topBar {
  top: 0;
  position: sticky;
  background: yellow;
  z-index: 10;
}

.content {
  width: 100%;
  height: 200vh;
  font-size: 100px;
  background: linear-gradient(to bottom, white, red);  
}

.rightBox {
  width: 200px;
  height: 200px;
  position: absolute;
  right: -100px;
  top: 100px;
  background: red;
  font-size: 20px;
}
<div class="topBar">
  <div> Top bar</div>
</div>

<div>


<div class="content">
  <div>My content</div>  
  <div class="rightBox">it goes out</div>
</div>
</div>

Upvotes: 3

David M.
David M.

Reputation: 41

This white space problem had been bugging me and I was doing the usual searches for ideas when I came across this thread. The way I fixed mine.. (back story- everything was fine and then I made some css changes, several days later I noticed the white space.) The white space was not to the right of the header on all pages, only certain ones- that’s how I knew it was a div issue. Made a small list of elements that were not on the good pages, but present on white space pages, letting me narrow things down a bit)

I simply used the Chrome inspector and the down arrow on the main affected page elements tab. While scrolling along with what was getting highlighted, I came across a div for the Wordpress like button, which I had set a Margin for instead of padding. This was enough to move the edge of the div to white space up the right side of the whole page, including the header.

I think the reason the white space doesn’t show up when you inspector it is because it doesn’t actually “exist”, for want of a better word, other than in the exclusively affected div, which in my case was a box only 20-30px in height way down the bottom of the page.

I tried the overflow-x/hidden command, while it did work for me, I found that it created an issue where the mobile device scrolling was jittery and sometimes wouldn’t start scrolling at all, just a move and a bounce back to start point. So that was no good obv! I would say to anyone having this problem that the inspector and finding the div, rather than hiding the overflow is the most trouble free way to go.

Hope that gives someone a pointer! Cheers :)

D

Upvotes: 3

AnatuGreen
AnatuGreen

Reputation: 895

In my case, I tried all the steps given by others here and it did not work. Funny enough even inspecting the elements did not show what exactly was the problem. Took me a while then I started removing and adding back some major elements of my page. Turned out it was a div that had a rogue element in it.

Point is, you may have to just iterate over and over before you land a solution. Try removing some major suspect elements , save, reload and see if it solves it, gradually you will find the culprit

Upvotes: 1

Nekoray
Nekoray

Reputation: 67

For mobile view in @media (your max/min width) for html and body tag add overflow-x: hidden.

Try this:

html, body {
  // Smooth scroll always for html tag
  scroll-behavior: smooth;
  // scroll-snap-type: y; // <-- snap in y axis
}

// mobile 
@media (max-width: 800px) {
  html, body {
  overflow-x: hidden;
  }
}

This worked for me.

Upvotes: 3

Vinay Yadav
Vinay Yadav

Reputation: 1306

Firstly follow the above answer make sure that the width of any element should not exceed 100% and then also try this:
Try making overflow-x: hidden; in html as well

html,body{
    overflow-x: hidden;
}

It worked for me

Upvotes: 103

Ven
Ven

Reputation: 431

for simple and not complicated code just use this code in the css file

body{
    overflow-x: hidden;
}

Upvotes: 18

mweb
mweb

Reputation: 538

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.

Try and find this using the inspect element and change this in CSS with using media queries

Upvotes: 51

Related Questions