ввод текста не меняется на @media - PullRequest
Новая
       32

ввод текста не меняется на @media

0 голосов
/ 02 сентября 2018

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

Когда я пытаюсь использовать другой интерфейс, он работает, но не для этого.

............................................... .................................................. .................................................. ...........

В чем проблема моего кода? 

.centered 
{
  width: 50%;
  margin: auto;
}

.group {
  width: 100%;
  overflow: hidden;
  position: relative;
} 

.label {
  position: absolute;
  top: 40px;
  color: #666666;
  font: 400 26px Roboto;
  cursor: text;
  transition: 0.3s ease;
  width: 100%;
  text-align: center;
}

.input {
  display: block;
  width: 100%;
  padding-top: 36px;
  border: none;
  border-radius: 0;
  font-size: 30px;
  transition: .3s ease;
  text-align: center;
}
.input:valid ~ .label {
  top: 3px;
  font: 400 26px Roboto;
}
.input:focus {
  outline: none;
}
.input:focus ~ .label {
  top: 3px;
  font: 400 26px Roboto;
}
.input:focus ~ .bar:before {
  transform: translateX(0);
}
.bar {
  border-bottom: 2px solid #ff5126;
  width: 100%;
  margin-top: 6px;
  transition: .3s ease;
}
.input:valid ~ .bar
{
  border-bottom: 2px solid #3bb873;
}
@media screen and (max-width: 1000px)
{
 #centered-email
 {
  width: 100%;
 }
 
}
        <div class="centered">
         <div class="group">
          <input type="text" class="input name" id="name" required autocomplete="off"/>
          <label class="label name-l" for="name">ایمیل</label>
          <div class="bar"></div>
         </div>
        </div>

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

Нет элемента с id -> centered-email.

Изменено, чтобы быть сделано -

Замените #centered-email на .centered в вашем медиа-запросе, и вы исправите свою текущую проблему.

Фиксированный фрагмент - 

.centered {
  width: 50%;
  margin: auto;
}

.group {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.label {
  position: absolute;
  top: 40px;
  color: #666666;
  font: 400 26px Roboto;
  cursor: text;
  transition: 0.3s ease;
  width: 100%;
  text-align: center;
}

.input {
  display: block;
  width: 100%;
  padding-top: 36px;
  border: none;
  border-radius: 0;
  font-size: 30px;
  transition: .3s ease;
  text-align: center;
}

.input:valid~.label {
  top: 3px;
  font: 400 26px Roboto;
}

.input:focus {
  outline: none;
}

.input:focus~.label {
  top: 3px;
  font: 400 26px Roboto;
}

.input:focus~.bar:before {
  transform: translateX(0);
}

.bar {
  border-bottom: 2px solid #ff5126;
  width: 100%;
  margin-top: 6px;
  transition: .3s ease;
}

.input:valid~.bar {
  border-bottom: 2px solid #3bb873;
}

@media screen and (max-width: 1000px) {
  .centered {
    width: 100%;
  }
}
<div class="centered">
  <div class="group">
    <input type="text" class="input name" id="name" required autocomplete="off" />
    <label class="label name-l" for="name">ایمیل</label>
    <div class="bar"></div>
  </div>
</div>
0 голосов
/ 02 сентября 2018

Я думаю, это проблемы:

1) Не удается найти div с идентификатором с именем "#centered-email".

2) Используйте @media only screen вместо @media screen

Проверьте это в jsfiddle: http://jsfiddle.net/3ob20zwx/3/

Похоже, сейчас работает. Надеюсь, вы получили то, что искали :) Добрый день!

...