Адаптивный дизайн / Медиа-запросы / CSS - PullRequest
Новая
       21

Адаптивный дизайн / Медиа-запросы / CSS

0 голосов
/ 11 июля 2019

Кажется, что страница index.html работает некорректно - она ​​не реагирует на смартфон.Однако страница hand.html работает нормально.Я уже поиграл с медиа-запросами

Кто-нибудь знает, как я могу решить мою проблему?

https://christine445.github.io/index.html

Это код моей таблицы стилей индекса.css: 

@media only screen and (min-width: 1200px) {
  .container {
    padding-right: .5rem;
    padding-left: .5rem;
    width: calc(1200px - 1rem);
    max-width: 100%;
  }
}

@media only screen and (min-width: 992px) {
  /* Pushes picture left a bit */
  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-6 {
    flex-basis: 43%;
    max-width: 43%;
  }
  .col-lg-offset-2dot5 {
    margin-left: 20.83333333%;
  }
  .col-lg-offset-1dot5 {
    margin-left: 8.5%;
  }
}
    /* Ending Screen */

@media only screen and (min-width: 768px) and (max-width:992px) {
  .col-md-offset-4 {
      margin-left: 33.33333333%;
  }
  .col-md-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  h4 {
    font-size: 1.3rem;
  }
  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }


@media screen and (max-width: 425px) {
  .Home .name {
    font-size: 3.5em;
  }
  .work-thumbnail {
    margin-bottom: 280px;
  }
  .global-nav > .container {
    padding: 15px;
  }
  .global-nav.-collapse > .container {
    padding: 2px 20px;
  }
  .nav-list {
    text-align:right;
  }
  .nav-list > .link {
    display: block;
    margin: 7px 8px;
    font-size: .9em;
  }
}

1 Ответ

0 голосов
/ 11 июля 2019

Вы объявили 

<meta name="viewport" content="width=device-width, initial-scale=1">

Но это внутри тега <script>.Пожалуйста, подтвердите ваш HTML-код.Чтобы быть уверенным, что нет никаких ошибок.https://validator.w3.org/

...