как убрать пробел в правой части страницы

Question

Я создаю адаптивный сайт и использую свойство overflow-x: hidden, чтобы остановить горизонтальную прокрутку страницы и показывать пробелы, но это не работает на телефонах. Каждый раз, когда я возвращаюсь на страницу, горизонтальная полоса прокрутки отображается снова, а справа появляется пробел. Я рассмотрел различные другие вопросы по этому вопросу, но не могу решить их.

Я полагаю, это связано с карточками на странице. Есть ли какие-либо стили на карточках, вызывающие эту проблему? Как я могу удалить пустое пространство?

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> 

Answer 1

Это потому, что вы используете width: 100vw - если у вас вертикальная прокрутка, ваш vw не будет учитывать полосу прокрутки и даст вам горизонтальную прокрутку. Вместо этого используйте width: 100% (или удалите его, так как h2 является блочным элементом и все равно займет всю ширину)

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>

Answer 2

Вы на правильном пути, но следует помнить, что вам также необходимо добавить метатеги в заголовок HTML.

Решение

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

И конечно, в CSS укажите поведение переполнения:

html {
    overflow-x: hidden;
}

Пояснение

Я сломаю метатег:

• width=device-width это означает, что мы говорим браузеру настроить ширину устройства
• width=minimum-scale это самый маленький масштаб, который вам следует go
• width=maximum-scale это самый большой масштаб, который вы go
• width=initial-scale с чего начать
• user-scalable, чтобы пользователь мог ущипнуть (увеличить на мобильном телефоне) или нет.

Подробнее об этом можно прочитать в w3schools .

Answer 3

Я нашел причину, по которой он так себя ведет. У вас есть заголовок и основной контент в одном разделе. Это вызвало все проблемы. Всегда старайтесь разделять разделы с умом. Вы можете увидеть карты в центре. позже откорректируйте маржу влево для класса .card-square.

Я не изменил ваш CSS. Просто изменили ваш HTML, чтобы разделить разделы. теперь я не вижу пустое пространство в мобильном представлении.

<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>