Я использую @media для своей страницы, и теперь я получаю боковую пустую страницу вокруг фона, когда я смотрю ее на своем мобильном телефоне.

Question

Итак, я новичок в использовании запросов medias. Он выглядит хорошо в моем веб-браузере (chrome), когда я изменяю его размер до разных размеров, но когда я смотрю на свой Интернет в телефоне, он выглядит как это .

вот интернет: http://www.wagrita.ml/

Answer 1

Просто обновите пространство согласно дизайну

.navbar-parent {
    background-color: rgba(247, 107, 138, .6);
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
}

.navbar-child {
    display: flex;
    justify-content: space-between;
    padding-right: 25px;
}
.navbar-child a {
    text-decoration: none;
    color: white;
    margin-left: 20px;
}

@media (max-width: 1368px){
  .navbar-child li {
      display: flex;
      margin-left: 60px;
  }
  .navbar-child img {
      width: 20px;
  }
}

<div class="navbar-parent">
        <div class="title-container">
            <div class="navbar-title">
            </div>
        </div>
        <ul class="navbar-child">
            
            <li><img src="./img/home.svg"><a href="#">INICIO</a></li>
            
            <li><img src="./img/male.svg"><a href="#">CONTACTO</a></li>
        </ul>
    </div>

Answer 2

Вы должны удалить margin-left в этих строках:

@media (max-width: 1368px)
.navbar-child img {
 /* margin-left: 135px; */
    width: 6%;
}

@media (max-width: 1024px)
.navbar-child img {
   /* margin-left: 75px; */
    width: 8%;
}
@media (max-width: 720px)
.navbar-child img {
   /* margin-left: 20px; */
}