Unwanted white space on right side in mobile view

html css bootstrap-4 responsive-design

42,054

Solution 1

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

Solution 2

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

Solution 3

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

body{
    overflow-x: hidden;
}

Solution 4

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.

View more solutions

42,054

Author by

MMR

ASK LEARN THEN ANSWER THEN BECOME EXPERT

Updated on January 16, 2022

Comments

MMR over 2 years

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.

MMR over 6 years

There was an element whose width is > 100% and that caused this.Thnaks to all.
edindubai over 4 years

while without "html," seemed to work on inspection on phone size on pc, the issue still occurred on phone itself, by adding this extra "html," it fixed it on the device too.
Ramesh Pareek about 4 years

Can you point an example scenerio where a width can go more than 100%?
usama sulaiman over 3 years

it's better to use it for html as well , like Vinay Yadav suggest html,body{ overflow-x: hidden; }
Ireneusz over 2 years

Thanks, I faced a similar problem, found the offending element where the width was set to 100% with additional padding. Fixed by adding box-sizing: border-box; to the container.
Jyotirmoy about 2 years

Worked for me. Adding html is advisable.