Проблемы с форматированием CSS в мобильном представлении - PullRequest
Новая
       16

Проблемы с форматированием CSS в мобильном представлении

1 голос
/ 29 марта 2019

Когда я смотрю свое приложение React на мобильном устройстве, всегда есть дополнительное место справа:

https://dsousadev.github.io/23imgs/

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

Вот текущий CSS в моем медиазапросе: 

@media all and (max-width: 414px) {
  .ImageCard,
  #CardImage {
     width: 314px;
  }
  #CardImage {
    height: 314px;
  }
  ul {
    font-size: 1.2rem;
    padding: 0 15px;
  }
}

1 Ответ

1 голос
/ 29 марта 2019

Элемент <input accept="image/*" name type="file"> вызывает проблему.

Если применить display: none к .fileContainer input, пробел исчезнет.

Редактировать

Хорошо, так что если посмотреть на проблему немного подробнее, похоже, что semantic.min.css применяет font-size: 100% к button, input, optgroup, select, textarea. Это приводит к увеличению размера вашего ввода (вот, когда visible):

enter image description here

Если мы отключим font-size: 100%, вход будет отображаться правильно:

enter image description here

После чего ваши оригинальные стили работают:

enter image description here

Так что display: none или возврат font-size будет работать:)

...