Почему некоторые, но не все мои стили не работают на мобильном - PullRequest
Новая
       6

Почему некоторые, но не все мои стили не работают на мобильном

0 голосов
/ 30 апреля 2020

Я искал inte rnet здесь и выше, но не могу найти ответ. По сути, мой стиль выглядит так, как задумано на рабочем столе и планшете. Некоторые элементы остаются стилизованными, как и должно быть, но большинство не отображается в мобильном представлении. Я удостоверился, что добавил <meta name="viewport" content="width=device-width, initial-scale=1"> в свой тег head, и путь к моему листу CSS указан правильно (так как другие размеры экрана оформлены правильно).

Мне удалось внести нужные изменения в инструменты Dev (на Firefox), но когда я добавляю одинаковые значения (в и из медиазапроса), они, кажется, не делают что угодно, например, когда я сохраняю и обновляю sh мою страницу, она возвращается к неправильному стилю.

Кто-нибудь знает, что я могу сделать по-другому или добавить в свой код, чтобы помочь? Заранее спасибо.

РЕДАКТИРОВАТЬ: вот фрагмент моего HTML и соответствующего CSS

h2 i {
  color: #fafafa;
}

.profile-text {
  padding: 100px;
}

.profile-text p {
  font-size: 18px;
}

.about {
  padding-top: 10px;
}

img {
  vertical-align: middle;
  border-style: none;
  width: 100%;
}

.photo {
  height: 50%;
  overflow: hidden;
}

.contact-info {
  background-color: #c158dc;
  text-align: center;
  color: #fafafa;
}

.contact-info .value {
  padding-left: 20px;
}

.value {
  margin-bottom: 10px;
  font-size: 18px;
}
<div class="row no-gutters">
  <div class="col-md-4 contact-info">
    <div class="photo">
      <img src="assets/images/bratislava-sm.JPG" alt="profile image">
    </div>
    <div class="upper value">
      <p>Amy H</p>
    </div>
    <div class="value">
      <p><i class="fas fa-map-marker-alt"></i> text here</p>
    </div>
    <div class="value">
      <p><i class="fas fa-phone-alt"></i> text here</p>
    </div>
    <div class="value">
      <p><i class="fas fa-envelope-open-text"></i> test here</p>
    </div>
  </div>

Ответы [ 2 ]

0 голосов
/ 01 мая 2020

Итак, после разговора с одним из моих преподавателей, оказалось, что я открыл медиа-очередь дальше в моем файле CSS, и при редактировании я удалил закрывающую фигурную скобку. Все эти проблемы вызваны одной маленькой}

Итак, если кто-то еще имеет метатег и борется с подоконником, убедитесь, что все ваши фигурные скобки закрыты.

0 голосов
/ 30 апреля 2020

Без дополнительной информации невозможно сказать, что происходит. Некоторые возможные вещи для проверки:

  • Убедитесь, что вы используете очистку кеша и ваше мобильное устройство не просто показывает старую кэшированную версию.
  • Вы можете применить очевидное правило стиля чтобы убедиться, что ваши изменения применяются, например background: red;.
  • Вы можете использовать Chrome или проверку удаленного устройства Safari для проверки страницы на вашем мобильном устройстве, если она подключена через usb к вашему компьютеру. Попробуйте в chrome://inspect
...