Материал Конструкция устройства Совместимость DIV слайд в (JS/JQuery/CSS)

Question

То, что я ищу, чтобы достичь это: Desired Live Website

1. Функция где щелкать на DIV. слайд входит с правой стороны, загружает внешнюю страницу внутри нее и закрывает (игнорирует кнопку со стрелкой), выключает ее.
2. Ползунок Div - совместимое устройство. то есть, на веб-страницах, он заполняет половину экрана, на экране мобильного телефона, он заполняет экран соответствующим образом. (Снимок экрана прилагается для справки)
   
   

Теперь

Я несколько выполнил указатель номер один где Div слайдов в & загружает внешнюю страницу. Fiddle Demo

$('#left').on('click',function(){ 
$('#frame').animate({left:'8'}); 
`}); 
$('#close').on('click',function(){ 
$('#frame').animate({left:'-100%'});});` 

JS для загрузки внешней страницы
showIframe = function (url) { document.getElementById('iframetarget').src = url; document.getElementById('frame').style.display = 'block';}

То, что я застрял на том, как осуществить Указатель 2, где слайд в Div должно быть Устройство совместимо.
Вот полный код Fiddle:. Full Demo
заполнить свободно направить меня к новой структуре в CSS также для ширины жидкости для слайд в

Любая помощь будет высоко ценится

Answer 1

Вам нужен медиа-запрос для #frame

@media (max-device-width : 480px) { 
    #frame { 
     width: 100%; 
    } 
} 

Выше триггеров класса, когда размер экрана ниже или равен 480 пикселей. Это можно изменить на любой размер ширины, который вы чувствуете.

Answer 2

Прост в использовании max-width в css.

width: 100% 
max-width: 500px;