Установка модальных размеров для большого всплывающего окна

Question

Использование css, js и html прямо из коробки, я очень доволен тем, как работает Magnific Popup. Первоначальный размер модального (примерно 900 х 500 пикселей) прекрасно работает на полном экране, но на уменьшенных экранах, реагирующее поведение этого штепселя значительно уменьшает модальную высоту и заставляет посетителя прокручиваться, как диккенс.

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

Я пробовал предложения в jQuery magnific-popup : open 2 popup iframe with differents width/height, но добавление разметки к моей инициализации js просто нарушает сценарий.

Я знаю очень мало о javascript, поэтому я ценю любые предложения.

Answer 1

Вы можете сделать это в CSS с помощью медиа-запроса. (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

@media screen and (max-width: 600px) { 
    .mfp-content { 
    height: 600px; // or whatever 
    } 
} 

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