CODEWITHSUNDEEP
css
SK1dev
SK1dev

Reputation: 1139

how to remove white space on right side of page

I'm building a responsive site and I'm using overflow-x: hidden property to stop the page from scrolling horizontally and showing white space but it's not working on phones. Every time I navigate back to the page, the horizontal scrollbar is shown again and white space appears on the right. I have looked at various other questions on this issue but cannot seem to solve it.

I believe it is related to the cards on the page, is any of the styling on the cards causing this issue? How can I remove the white space? 

html {
overflow-x: hidden;
}
.portfolio-header {
margin-top: 19rem;
margin-left: 31%;
font-size: 30px;
}
}
.card-square
{
position: relative;
width: 90%;
height: 300px;
display: flex;
margin-left: 0px;
margin-top: 50px;
margin-bottom: 100px;
justify-content: center;
align-items: center;
}

.card-square-2 {
 margin-top: 0rem;  
 }
.card-square span:nth-child(1) {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 2px solid #000;
 border-radius: 38% 62% 63% 37% / 
 41% 44% 56% 59%;
 transition: 0.5s;
 animation: animate 6s linear infinite;  
 }
 .card-square:hover span:nth-child(1) {
 border: none;
 background: rgba(22,168,194,0.8);
 }
 .card-square span:nth-child(2) {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 2px solid #000;
 border-radius: 38% 62% 63% 37% / 
 41% 44% 56% 59%;
 transition: 0.5s;
 animation: animate2 4s linear infinite;
 }

 .card-square:hover span:nth-child(2) {
 border: none;
 background: rgba(22,168,194,0.8);
 }
 .card-square span:nth-child(3) {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 2px solid #000;
 border-radius: 38% 62% 63% 37% / 
 41% 44% 56% 59%;
 transition: 0.5s;
 animation: animate 10s linear infinite;
 }

 .card-square:hover span:nth-child(3) {
 border: none;
 background: rgba(22,168,194,0.8);
 }
 @keyframes animate {
 0% {
 transform: rotate(0deg); 
 }
 100% {
 transform: rotate(360deg);  
 }
 }
 @keyframes animate2 {
 0% {
 transform: rotate(360deg); 
 }
 100% {
 transform: rotate(0deg);  
 }
 }
 .content {
 position: relative;
 color: #000;
 text-align: center;
 transition: 0.5s;
 z-index: 1000;
 }

 .content a {
 position: relative;
 /* display: inline-block; */
 margin-top: 10px;
 border: 2px solid #fff;
 padding: 6px 18px;
 text-decoration: none;
 color: #fff;
 margin-left: 12px;
 font-weight: 600;
 border-radius: 73% 27% 44% 56% /
 49% 44% 56% 51%;
 }
 .content a:hover {
 background: #000;
 color: #333;
 } 
 .content p, .content h2 {
 text-align: center;
 width: 85%;
 margin-left: 7.5%;
 }
 .content p {
 font-size: 16px;
 }
 @media only screen and (min-width: 768px) {
 .card-square {
 width: 400px;
 height: 400px;
 margin-left: 130px;
 }
  
.card-square-2 {
margin-top: -500px;
margin-left: 55%;
}
.card-square-4 {
margin-left: 55%;
margin-top: -500px;
}
.content p {
font-size: 20px;
}
}
  <section class="portfolio" id="portfolio">
  <h1 class="portfolio-header">Card section</h1>
  
  <div class="card-square">
    <span></span>
    <span></span>
    <span></span>
    <div class="content">
      <h2>Card 1</h2>
      <p> This is card 1.
      </p>
      <a href="#">Link btn</a>
    </div>
  </div>  
  <div class="card-square card-square-2">
    <span></span>
    <span></span>
    <span></span>
    <div class="content">
      <h2>Card 2</h2>
      <p>This is card 2. </p>
      <a href="#">Link</a>
    </div>
  </div>  
  <div class="card-square card-square-3">
    <span></span>
    <span></span>
    <span></span>
    <div class="content">
      <h2>Card 3</h2>
      <p>This is card 3.</p>
      <a href="#">Link</a> 
      <a class="second-btn" href="#">Link 2</a>
    </div>
  </div>  
  <div class="card-square card-square-4">
    <span></span>
    <span></span>
    <span></span>
    <div class="content">
      <h2>Card 4</h2>
      <p>This is card 4.</p>
      <a href="#">Link 4</a>
    </div>
  </div>  
  </section>

Upvotes: 3

Views: 1309

Answers (3)

Shahar
Shahar

Reputation: 2191

You are on the right track, but one thing to keep in mind is that you need to also add meta tags to your HTML header.

Solution

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1">

And of course, in the CSS specify the overflow behavior:

html {
    overflow-x: hidden;
}

Explanation

I'll break down the meta tag:

  • width=device-width this means we are telling the browser to adjust to the device-width
  • width=minimum-scale this is the smallest scale that you should go
  • width=maximum-scale this is the biggest scale that you should go
  • width=initial-scale where to start
  • user-scalable to allow the user to pinch (zoom in on mobile) or not.

You can read more about it on w3schools.

Upvotes: 1

Sadesh Kumar N
Sadesh Kumar N

Reputation: 2052

I found the reason why it's behaving like this. You have the header and main content in a single section. This caused all the issues. Always try to segregate section wisely Once you segregate. you can see the cards displaying in center. later adjust your margin-left for .card-square class.

I haven't changed your CSS. Just modified your HTML to segregate the sections. now I cant see white space in the mobile view.

<section class="portfolio" id="portfolio">
            <h1 class="portfolio-header">Card section</h1>
        </section><section>
            <div class="card-square">
              <span></span>
              <span></span>
              <span></span>
              <div class="content">
                <h2>Card 1</h2>
                <p> This is card 1.
                </p>
                <a href="#">Link btn</a>
              </div>
            </div>  
            <div class="card-square card-square-2">
              <span></span>
              <span></span>
              <span></span>
              <div class="content">
                <h2>Card 2</h2>
                <p>This is card 2. </p>
                <a href="#">Link</a>
              </div>
            </div>  
            <div class="card-square card-square-3">
              <span></span>
              <span></span>
              <span></span>
              <div class="content">
                <h2>Card 3</h2>
                <p>This is card 3.</p>
                <a href="#">Link</a> 
                <a class="second-btn" href="#">Link 2</a>
              </div>
            </div>  
            <div class="card-square card-square-4">
              <span></span>
              <span></span>
              <span></span>
              <div class="content">
                <h2>Card 4</h2>
                <p>This is card 4.</p>
                <a href="#">Link 4</a>
              </div>
            </div>  
            </section>

Upvotes: 0

Pete
Pete

Reputation: 58422

It's because you use width: 100vw - if you have a vertical scroll, your vw will not take the scrollbar into account and will give you horizontal scroll too. Use width: 100% instead (or remove it as h2 is a block element and will take the full width anyway)

html,
body {
  margin: 0;
  min-height: 100%;
  min-width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

section {
  margin-bottom: -33px;
}

h1 {
  margin-left: 20%;
  color: rgb(22, 168, 194);
}


/* Hero Image & navbar */

.banner-text {
  width: 100%;
  position: absolute;
}

* {
  box-sizing: border-box;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: none;
  color: white;
  font-size: 20px;
}

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-links li {
  list-style: none;
}

.navbar-links li a {
  text-decoration: none;
  color: white;
  padding-left: 1rem;
  padding-right: 1em;
  display: block;
}

.navbar-links li:hover {
  background: #555;
}

.toggle-button {
  position: absolute;
  top: .75rem;
  right: 2.5rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 31px;
  height: 21px;
}


/* Phones */

@media (min-width: 320px) and (max-width: 480px) {
  .toggle-button {
    display: flex;
  }
  .navbar-links li:hover {
    background: #555;
  }
  .navbar-links {
    display: none;
    width: 100%;
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar-links ul {
    flex-direction: column;
    width: 100%;
    /* margin-top: 30px; */
  }
  .navbar-links li {
    text-align: center;
  }
  .navbar-links li .navlink {
    padding: 0.5rem 1rem;
  }
  .navbar-links.active {
    display: flex;
  }
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background: white;
  border-radius: 10px;
}

.banner-text h2 {
  text-align: center;
  color: #fff;
  width: 100%;
  font-size: 28px;
  margin-top: 48%;
}

.banner-text .name {
  margin-bottom: -95px;
}


/* For desktop: */

@media only screen and (min-width: 768px) {
  .banner-text h2 {
    margin-top: 14%;
    font-size: 54px;
  }
  .banner-text .name {
    margin-bottom: -100px;
  }
}

.animation-area {
  /* background: linear-gradient(to left,   #16A8C2, #1B1C1C); */
  background: rgb(22, 168, 194);
  background: linear-gradient(0deg, rgba(22, 168, 194, 1) 0%, rgba(27, 28, 28, 1) 100%);
  width: 100%;
  height: 100vh;
}

.box-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 97%;
  overflow: hidden;
}

.box-area .box-item {
  position: absolute;
  display: block;
  list-style: none;
  width: 25px;
  height: 25px;
  background: rgba(255, 255, 255, 0.2);
  animation: animatedSquares 20s linear infinite;
  bottom: -150px;
}

.box-area li:nth-child(1) {
  left: 86%;
  width: 80px;
  height: 80px;
  animation-delay: 0s
}

.box-area li:nth-child(2) {
  left: 12%;
  width: 30px;
  height: 30px;
  animation-delay: 1.5s;
  animation-duration: 10s;
}

.box-area li:nth-child(3) {
  left: 70%;
  width: 100px;
  height: 100px;
  animation-duration: 5.5s;
}

.box-area li:nth-child(4) {
  left: 42%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 15s;
}

.box-area li:nth-child(5) {
  left: 65%;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
}

.box-area li:nth-child(6) {
  left: 15%;
  width: 110px;
  height: 110px;
  animation-delay: 3.5s;
}

@keyframes animatedSquares {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(-800px) rotate(360deg);
    opacity: 0;
  }
}
<section>
  <div class="banner-text">
    <nav class="navbar">
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="navbar-links">
        <ul>
          <li><a class="navlink" href="#">navlink1</a></li>
          <li><a class="navlink" href="#">navlink2</a></li>
          <li><a class="navlink" href="#">navlink3</a></li>
          <li><a class="navlink" href="#">navlink4">CV</a></li>
        </ul>
      </div>
    </nav>
    <h2 class="header name">title name</h2>
    <h2 class="header role">title role</h2>
  </div>

  <div class="animation-area">
    <ul class="box-area">
      <li class="box-item"></li>
      <li class="box-item"></li>
      <li class="box-item"></li>
      <li class="box-item"></li>
      <li class="box-item"></li>
      <li class="box-item"></li>
    </ul>
  </div>
</section>
<section class="about" id="about">
  <!-- social media icon bar -->
  <ul class="social-media">
    <li class="social-item">
      <a href="" class="github">
        <i class="fa fa-github"></i></a>
    </li>
    <li class="social-item">
      <a href="">
        <i class="fa fa-linkedin"></i></a>
    </li>
    <li class="social-item">
      <a href="">
        <i class="fa fa-stack-overflow"></i></a>
    </li>
  </ul>
  <ul class="social-media-2">
    <li class="social-item">
      <a href="" class="codepen">
        <i class="fa fa-codepen"></i></a>
    </li>
    <li class="social-item">
      <a href="" class="dribble">
        <i class="fa fa-dribbble"></i></a>
    </li>
    <li class="social-item">
      <a href="" class="twitter">
        <i class="fa fa-twitter"></i></a>
    </li>
  </ul>
  <h1 class="about-header">About</h1>
  <p class="about-text">text
  </p>
  <p class="career-story">
    text
  </p>
  <div class="polaroid">
    <img class="work-colleagues" src="./Images/img.jpg" alt="alt">
    <div class="description">
      <p class="description-text">text
        <a class="featured-link" href="link" width="100%" height="100%">
          Polaroid text</a> </p>
    </div>
  </div>
  <p class="interests">
    text
  </p>
  <div class="polaroid polaroid-2">
    <img src="./Images/img.jpg" alt="alt" width="100%" height="100%">
    <div class="description">
      <p class="description-text">text
      </p>
    </div>
  </div>
</section>

Upvotes: 6

Related Questions