Почему у меня верстка не применяется в @media?

Question

[Руслан Абсалямов]

Я использую вот такой код

.focus-form{
  width: 24%;
  float: right;
  padding: 10px;
  background: rgba(255, 255, 255, 0.91);
  margin-top: 6%;
  margin-right: 13%;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  h4:first-child{
    font-weight: bold;
  }
  p{
    font-size: 21px;
    span{
      font-weight: bold;
    }
  }
}
@media (min-width: 320px) and (max-width: 1455px){
  .focus-form{
    width: 40%;
  }
}

@media screen and (max-width: 320px){
  .focus-form{
    width: 79%;
  }
}

Но почему-то он не применяется, то есть применяется стандартный .focus-form и media (min-width: 320px) and (max-width: 1455px) а дальше уже не применяется media screen and (max-width: 320px)
Как тут быть?

Comments

[lilandre]

Можете скинуть хтмл код ? А на каком браузере тестите? Маштаб 100 процетов ?

[alex-1917]

max-width: 320px - это неправильно и встречный вопрос - это вообще для ЧЕГО!!?) для калькуляторов?)))

Answer 1

[Руслан Абсалямов]

media only screen and (min-width: 600px)

Answer 2

[alex-1917]

min-width: 320px
max-width: 320px

как минимум так нельзя, как максимум автор такого кода рукожоп.

Comments

[Руслан Абсалямов]

А как правильно делать для адаптивного дизайна?
Вроде бы же через media

[alex-1917]

Руслан Абсалямов, да, через медиа, но не через такое.
у бутстрапа хотя бы подсмотрите...
getbootstrap.ru/docs/v4-alpha/layout/overview

ммм. а вообще meta name="viewport" используется?)))

[Руслан Абсалямов]

alex-1917, я materializecss использую. Простой для лендинга, поэтому его и использую

[alex-1917]

Руслан Абсалямов, вы-бы по ссылке-бы прошли-бы... там всего 4 строчки надо содрать.. бы...

Answer 3

[Максим Девда]

media screen and (max-width: 319px) нужно

Comments

[Руслан Абсалямов]

А что изменилось? вроде бы тоже самое что я применяю
И я заметил у materialize.css тоже не работает grid
class="col s12 m4 l3", то когда я делаю экран допустим 320px то получается что блок не становиться в полном объеме.
Я думаю может в хосте дело? настройки nginx, потому что как-то странно применяется все это