Почему не работает меда запрос?

Question

[Евгений]

Исходные данные:
есть сайт, без мобильной версии.
есть форма связи, всплывающая с помощью fancybox.
окно всплывает с шириной элемента, есть элемент

.feedbackform {
	background: #f9f9f9;
	width: 400px;
	height: 390px;
	margin: auto;
}

Хочется сделать для просмотра с мобильного телефона размер этого элемента большего размера, но такой медиа запрос ничего не меняет:

@media all and (max-width : 480px) { 
.feedbackform div {
	background: #f9f9f9;
	width: 800px;
	height: 1000px;
}
}

Подскажите пожалуйста почему?

Comments

[Alexey10]

ссылку на сайт кинь

[Destell]

У вас .feedbackform и .feedbackform div в медиазапросе.

[Alexey10]

в первом варианте вы обращаетесь к классу .feedbackform, а во втором к всем дивам внутри класса .feedbackform.

[Alexey10]

@media only screen and (max-width : 480px) {
    .feedbackform {
      background: #f9f9f9;
      width: 800px;
      height: 1000px;
    }
}

[Евгений]

Alexey10, не работает (

[Евгений]

Alexey10, www.avira59.ru/page/forma-test.html
в браузере даже не воспринимает этот запрос, как будто его нет

Answer 1

[Владимир Проскурин]

div лишний. Если вы хотели таким образом дать больший приоритет (но тогда нужно было размещать div вначале), то надо просто разместить медиа запрос ниже основного стиля.

Comments

[Евгений]

это я уже экспериментировал, без дива тоже самое

[Владимир Проскурин]

Евгений, добавьте в тег head следующее

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

Answer 2

[Alexey10]

Все работает)

Кэш проверьте, или масштаб браузера проверьте (cntrl +)

Comments

[Евгений]

Специально зашел с инкогнито

[Alexey10]

Евгений, добавь в head

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

[Евгений]

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

[Alexey10]

можно на js добавить проверку, и если ширина экрана меньше 480px то добавлять класс .style-css, по которому добавить свои свойства.

if ($(window).width() < 480) {
        $('.feedbackform').addClass('style-css');
    }
    else{
        $('.feedbackform').removeClass('style-css');
    }

[Евгений]

Alexey10, я правильно понял? если ширина устройства будет меньше 480 то диву с классом .feedbackform добавится еще 1 класс .style-css и в css я просто прописываю 800х1000 для .style-css?

[Евгений]

Alexey10, а почему медиа запрос без мета тега не работает?

Answer 3

[hesrun]

Странно, что Вы пишите в запросе до 480px, а форме написали 800px, по итогу у Вас горизонтальный скролл получится. Если делаете для мобилы, вытягивавайте на 100 процентов форму, чтоб она тянулась. На любом экране до ваших 480px

А, господин и у вас viewport не указан в хеде...

Comments

[Евгений]

я пробовал прописать, но с 1.0 масштабированием появился неприятный скролл, но действительно медиа запрос тогда сработал.
Как сделать что бы страница не масштабировалась после прописания viewport?

[hesrun]

Если вам нужен адаптив, то без вьюпорта никуда.
А скролл неприятный появился, потому что вы сделали ширину формы больше чем ширину в запросе.
Вы совсем новичек?
Если да то вам с этим нужно разобраться. В двух словах тут не расскажешь принцип.